I have 2 "links" which has to get a color when i click on them. But they need also be in a h1 tag.
Like this:
<div id="content" class="work">
<h1 style="border-bottom:1px solid #CCC;"><a id="link-grafisk-design" href="#grafisk-design">Grafisk design</a></h1>
<h1 style="border-bottom:1px solid #CCC;"> / </h1>
<h1 style="border-bottom:1px solid #CCC; width:276px"><a id="link-webbdesign" href="#webbdesign">Webbdesign</a></h1>
</div>
But it wont change color when i click in one of them.
Here's the CSS
#webbdesign:target ~ #link-webbdesign {
color:#00A2FF;
}
That's not what :target is for. For styling the link you click on you should use h1 a:active.
h1 a:active {
color:#00A2FF;
}
If you want the changed colour to persist until the user clicks something else, then use:
h1 a:focus,
h1 a:active {
color: #00A2FF;
}
DEMO
Related
I want to change hover color in laravel 5.2
I'm try but can't.
Here is my link
<div class="classname">
<h4 align="center" class="well"><b>Course Materials<b></h4>
</div>
Here is my css
div.classname a:hover {
color: green;
}
Try:
.classname a:hover { color: green }
OR
change class to your link
a href="your link" class="classname" >.... < / a >
.classname a:hover { color: green }
I hope it work!
Make the changes as below in your css codes and it will work for you.
<div class="classname">
<h4 align="center" class="well"><b>Course Materials<b></h4>
</div>
In you css make changes and replace the code with lines below:
.classname a:hover {
color: green;
}
I have a <div> with a class that gives it the color blue, but the color blue does not appear. I do not understand why?
Is this because a has priority over the class blue? I tried: a .blue{} as it is more specific it should win, is that wrong?
If I delete "Some link" then it works. Why? I do not see the relation
Here is the example to check:
a {
outline:0;
text-decoration:none;
}
a:link, a:visited {
color:black;
}
a:hover {
color:black;
text-decoration: none;
}
.blue {
color:blue;
}
<p>Some text, some text</p>
<p>
Some link
<p>
<a href="next.php">
<div class="blue"> This text should be blue </div>
</a>
JSFiddle
You just need to close your <p> tag:
<p> Some link </p>
try the following :
a { outline:0; text-decoration:none ; }
a:link,
a:visited { color:black; }
a:hover { color:black; text-decoration: none; }
.blue { color:blue; }
<p> Some text, some text </p>
<p> Some link </p>
<a href="next.php">
<span class="blue"> This text should be blue </span>
</a>
Chrome was correcting your code and placing the div with the blue class outside of the a tag as it is a block element and the a is not.
Note: the malformed p tag solved it
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Home
Quem-somos
FAQ
</div>
</div><!--/span-->
</div><!--/row-->
I have this code above, and i want highlight the current page with the danger color, but the .active class it's blue in this particular code.
I already try setup in my stylesheet:
.active {
background-color: red;
}
but has no effect
Even though specifying !important will work, this is is bad practice as it stops the css cascading and will probably cause more problems than it fixes. All you need to do is to be more specific with your selector.
.list-group a.active { background-color: red;}
See my Example
You could force the override with !important like so:
.active {
background-color: red !important;
}
This worked for me:
a.list-group-item.active {
background: red;
}
I would like to make it so that all of my tags look plain when they show up on the screen also after I visit them or if I hover over them. I put all of my divs in a wrapper and tried to refer to them but it didn't seem to work. I don't really need the wrapper if I could just refer to everything using a:hover ... that would be fine.
here is my HTML
<div id="wrapper">
<div id="settings_button">
<span class="settings_text">
Settings
</span>
</div>
<div id="posts_button">
<span class="one_bar_text">
Posts
</span>
</div>
<a href="#" alt="posts">
<div id="posts_button_dark">
<span class="one_bar_text">
Posts
</span>
</div>
</a>
<div id="profile_button">
<span class="one_bar_text">
Profile
</span>
</div>
<div id="profile_button_dark">
<span class="one_bar_text">
Profile
</span>
</div>
</div>
Below is my CSS
#wrapper a:link {
color: none;
text-transform: none;
}
#wrapper a:visited {
color: none;
}
#wrapper a:hover {
color: none;
text-transform: none;
}
I will be making most of my divs into links i just haven't yet. and i would like to avoid having to reference each div's tag on my CSS page
so i changed my CSS to this
a:link {
color: none;
text-transform: none;
}
a:visited {
color: none;
}
a:hover {
color: none;
text-transform: none;
}
but the link is still being underlined on hover over
a {
color: black;
text-decoration: none;
}
This is highly questionable, but it addresses the question you asked. You don’t need any fancy selectors, since any setting in a page style sheet that applies to an element will override browser defaults.
You just need to set an explicitly color (or use inherit, but IE does not support it), and to kill underlining, you need to set text-decoration, not text-transform.
You should use either links or buttons, not <divs>.
If you do decide to go with the current markup:
div[id*=button] {
...
}
If you decide to sober up (seriously, don't use divs!)
Just a or button will do.
a {
color: red;
}
Will color all links in red.
Note that it will catch all links, as in in the content area, the nav, the footer. Everywhere.
a{
color:#fff;
}
Is this what you meant?
Just use a
a:link {
color: none;
text-transform: none;
}
a:visited {
color: none; }
a:hover {
color: none;
text-transform: none; }
I am making a set of buttons for my site, and I am in need of some professional insight.
In order to reduce CSS bloat, I want to subclass my buttons for different colors, ex .button.blue .
Will the following incur issues in the future? (assuming I don't make a class of just .blue)
Do I have to use something like .button.button-blue instead?
.button {
display:inline-block;
padding: 9px 18px;
margin: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
background: #FFE150;
}
.button.blue {
background: #49b8e7;
border:1px solid #54abcf;
border-bottom:1px solid #398fb4;
color:#FFF
text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
height: 50px;
}
.header.blue {
background: blue;
color: #fff;
}
What you have there with the multi-classes will work fine assuming you want them to work like so:
<div class="button blue">
Will use .button and .button.blue
</div>
<div class="button">
Will only use .button
</div>
<div class="header blue">
Will use .header and .header.blue
</div>
<div class="header">
Will only use .header
</div>
<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
A selector like .button.blue actually selects for an element with that has both "blue" and "button" as classes, not a class called .button.blue. See http://www.w3.org/TR/CSS21/selector.html#class-html.
You can use the .button.blue style rule you have listed, but you'll need to rearrange your HTML so that you have something like <button type="button" class="button blue"/>. However, you don't really need to have a button class since it being a button (or <input type="submit">, etc.) is enough to use in your selector. You could write a CSS rule that is simply button.blue, input[type=submit].blue{}
Seems like button.blue is enough.
The only difference between the two is if you use <button class="button blue">, or <button class="button button-blue">.
You even don't need to duplicate the painting in blue... You can just do something like this:
.button
{
// button style
}
.header
{
// header style
}
.blue
{
background: blue;
color: #fff;
}
Of course if you add the blue class to each of them. (<div class="header blue">and<button class="button blue">)
Combine the classes applying the color you want to theme.
HTML:
<input type="text" class="text-field-required default" .../>
<select class="autocomplete-drop-down blue">...</select>
<a href="#" class="button-link green" .../>
CSS:
.text-field-required {
//component css theme without colors
}
.default {
//default color css theme for any component
}
.blue {
//blue css theme for any component
}
.green {
//green css theme for any component
}