Set a:hover based on class
Solution 1
Try this:
.menu a.main-nav-item:hover { }
In order to understand how this works it is important to read this the way the browser does. The a
defines the element, the .main-nav-item
qualifies the element to only those which have that class, and finally the psuedo-class :hover
is applied to the qualified expression that comes before.
Basically it boils down to this:
Apply this hover rule to all anchor elements with the class
main-nav-item
that are a descendant child of any element with the classmenu
.
Solution 2
Cascading is biting you. Try this:
.menu > .main-nav-item:hover
{
color:#DDD;
}
This code says to grab all the links that have a class of main-nav-item AND are children of the class menu, and apply the color #DDD when they are hovered.
Solution 3
Set a:hover based on class you can simply try:
a.main-nav-item:hover { }
Solution 4
how about
.main-nav-item:hover
this keeps the specificity low
Solution 5
try this
.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}
.div a:hover
{
background-color:#080808;
color:white;
}
lets say we have a anchor tag used in our code and class"div" is called in the main program. the a:hover will do the thing, it will give a vampire black color to the background and white color to the text when the mouse is moved over it that's what hover means.
Admin
Updated on July 05, 2022Comments
-
Admin almost 2 years
I have the following HTML:
<div class="menu"> <a class="main-nav-item" href="home">home</a> <a class="main-nav-item-current" href="business">business</a> <a class="main-nav-item" href="about-me">about me</a> </div>
In CSS, I want to set the
a:hover
for these menu items to a particular color. So I write:.menu a:hover { color:#DDD; }
But, I want to set this
a:hover
color only for those<a>
tags with the class main-nav-item and not the main-nav-item-current, because it has a different color and shouldn't change on hover. All<a>
tags within the menu div should change color on hover except the one with the current class.How can I do it using CSS?
I tried something like
.menu a:hover .main-nav-item { color:#DDD; }
thinking that only ones with main-nav-item class will change color on hover, and not the current one. But it is not working.
-
Admin over 14 yearsIt worked! :) Can you explain how that CSS selector is interpreted by the browser? Like in words. So that I know the logic and it'll be helpful for other CSS I write...
-
Joe Dargie over 14 yearsIn words, that selector would be: “all <a> tags with a class of main-nav-item, and an ancestor with a class of menu, that are in the hover state (i.e. have the mouse cursor on top of them)”.
-
Admin over 14 yearsAnother way of doing it. Will check it out too. Thanks :)