I have an anchor tag with 2 spans in it...
<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>
On hover of this anchor tag, I want to change the color of the text inside the spans, but I want them to each be a different color. Right now, I can only get one span to transition at a time. How can I get both transitions to occur simultaneously regardless of which span inside of the anchor tag is hovered on?
#banner-logo-hello:hover,
#banner-logo-hello:active,
#banner-logo-hello:focus {
color: red;
transition: 0.5s;
}
#banner-logo-world:hover,
#banner-logo-world:active,
#banner-logo-world:focus {
color: yellow;
transition: 0.5s;
}
Target a:hover #span-id-name {} for both of the spans
a:hover #banner-logo-hello {
color: red;
}
a:hover #banner-logo-world {
color: yellow;
}
<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>
You can also target via :nth-child, or it's variations like :first-child or :last-child or :nth-of-type
a:hover span:last-child {
color: red;
}
a:hover span:first-child {
color: yellow;
}
<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>
Related
scss
a {
text-decoration: none;
&:active {
color: $color-secondary;
}
&:visited {
color: $color-primary;
}
&:hover {
color: $color-accent;
}
}
css
a:active {
color: #E4E4E4;
}
a:visited {
color: #333;
}
a:hover {
color: #6DB48B;
}
The compiled css only takes the last property into consideration.
How do I use multiple ampersands for an anchor element?
The :active styles fail to show because they get overridden by the styles that appear lower down in your Sass. To fix this, reorder your Sass in this order:
:visited
:hover
:active
I recently encountered an 'Issue' in the Edge Browser using the following code leading to a weird hover transitioning behavior on links.
Take a look yourself:
JSFiddle
The App I'm working on ('Test' Link)
HTML:
<a><h1>Test</h1></a>
SCSS:
* {
transition: all .15s ease-in;
}
a {
color: inherit;
&:hover {
color: blue;
}
}
h1 {
color: black;
}
It seems that you did not follow color assigning. The weird behavior could be associated with to this improper use. A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
link {color: blue;}
visited {color: purple;}
hover {color: red;}
active {color: yellow;}
I am trying to understand why my color is being overridden in my CSS when I am using css-modules. Here is my jsx:
let tabLink = className({
[s.selected]: selectTab
});
<li className={s.tabs}>
<a className={tabLink}>{tab.translation}</a>
</li>
And here is the CSS:
.tabs {
color: #454545;
}
.tabs li {
display: inline-block;
font-size: 11px;
}
.tabs li a {
color: #454545;
cursor: pointer;
text-decoration: none;
}
.selected {
background: url('../../images/header_nav_on.gif') top left repeat-x;
color: white;
}
So when selectTab is true, then s.selected is applied to the element. In that case, color is white, but it is not applied to the element. the color that is defined in .tab li a is overriding it. I am having to add !important to white to make it be the color. What am I not understanding about css or css-modules?
.tabs li a is more specific than .selected. If you want .selected to overwrite the default, try .tabs .selected {
background: url('../../images/header_nav_on.gif') top left repeat-x;
color: white;
}.
You can use the following formula to calculate specificity: +100 for id, +10 for class, +1 for tag.
That makes .tabs li a worth 12 (class(10) + tag(1) + tag(1)) VS .selected, which is only 10. If you make it .tabs .selected instead, it will be worth 20 (class(10) + class(10)) and will put it above the default value.
I might have overseen a really stupid mistake, but I can't find out why this doesn't work:
Here's my HTML, it's a simple menu, and if I hover "Home" or "Play" the font-color of the div "deco" changes to red...
<div class="menu">
<h1>
HOME PLAY LOGIN
<div id="deco">A</div>
</h1>
</div>
CSS:
body {
height:100%;
width:100%;
display: block;
background-color: #000;
overflow: hidden;
margin: 0;
padding:0;
}
.menu {
margin-top:10%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
h1 {
font-family: "Dauphin";
color: #FFFFFF;
}
a {
color: #FFF;
text-decoration: none;
}
a:hover #deco{
color: red;
}
#deco {
font-family: "Invader";
top: 123px;
color: #FFF;
width:100%;
height:100%;
text-align: center;
}
Your selector doesn't match the element. For a:hover #deco to work, the div has to live inside the anchor like so:
<a href="#">HOME
<div id="deco">A</div>
</a>
Modern browsers support the general sibling selector ~:
a:hover ~ #deco
If you need to support browsers that do not support the general sibling selector, you can achieve this with jQuery something like this:
$('a').hover(
function() { $('#deco').addClass('link-hover'); },
function() { $('#deco').removeClass('link-hover'); });
And define the CSS:
#deco.link-hover {
color: red;
}
This isn't working because #deco isn't a child element of the a tag.
The CSS declaration a:hover #deco refers to any element with ID 'deco' that is a child (e.g. contained inside of) an anchor element that is in the hover state.
For it to work you need #deco to be inside of the A tag, a child rather than a sibling element. Or you could leave the HTML as-is and accomplish this with simple jQuery instead (using .css or .addClass to change the style definition on hover).
Sorry for my poor english, I'm french !
The first li is already in red, but I want classical rollover effect (only css)
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
with
li:first-child { color: red; }
li:hover { color: red; }
ul:hover li:first-child { color: black; }
li:first-child:hover { color: red; }
The last line doesn't work : When my mouse is over 1111, he becomes black instead of stay red.
Look here please : http://jsfiddle.net/cP5rQ/3/
And thank you for advance.
You need to increase the specificity of your last rule enough so that it becomes at least equal to the specificity of the third rule; it will then override the third rule and the item will become red as it should.
Do this by writing the last rule as
ul:hover li:first-child:hover { color: red; }
See it in action.
This does the trick. Is this what you wanted?
li:first-child { color: red; }
ul:hover li:first-child { color: black; }
li:hover { color: red; }
ul:hover li:first-child:hover { color: red; }
http://jsfiddle.net/cP5rQ/6/