Stel a:hover in op basis van klasse

Ik heb de volgende 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 wil ik de a:hovervoor deze menu-items op een bepaalde kleur instellen. Dus ik schrijf:

.menu a:hover
{
    color:#DDD;
}

Maar ik wil deze a:hover-kleur alleen instellen voor die <a>-tags met de klasse main-nav-itemen niet de main-nav-item-current, omdat deze een andere kleur heeft en niet zou moeten veranderen bij de muisaanwijzer. Alle <a>-tags in de menudiv moeten van kleur veranderen bij het aanwijzen, behalve degene met de huidigeklasse.

Hoe kan ik dit doen met CSS?

Ik heb zoiets geprobeerd

.menu a:hover .main-nav-item
{
    color:#DDD;
}

in de veronderstelling dat alleen degenen met de klasse hoofd-nav-item van kleur zullen veranderen bij de muisaanwijzer, en niet de huidige. Maar het werkt niet.

Antwoord 1, autoriteit 100%

Probeer dit:

.menu a.main-nav-item:hover { }

Om te begrijpen hoe dit werkt, is het belangrijk om dit te lezen zoals de browser dat doet. De adefinieert het element, de .main-nav-itemkwalificeerthet element alleen voor degenen die die klasse hebben, en tenslotte de psuedo- class :hoverwordt toegepast op de gekwalificeerde expressie die ervoor komt.

In principe komt het hierop neer:

Pas deze hover-regel toe op alle ankerelementen met de klasse main-nav-itemdie een afstammeling zijn van een element met de klasse menu.

Antwoord 2, autoriteit 9%

Cascading is je bijten. Probeer dit:

.menu > .main-nav-item:hover
    {
        color:#DDD;
    }

Deze code zegt dat je alle links moet pakken die een klasse van main-nav-item hebben EN onderliggende zijn van het klassenmenu, en de kleur #DDD moeten toepassen wanneer ze de muisaanwijzer erop houden.

Antwoord 3, autoriteit 4%

Stel a:hover in op basis van klasse die u eenvoudig kunt proberen:

a.main-nav-item:hover { }

Antwoord 4

hoe zit het met
.main-nav-item:hover

dit houdt de specificiteit laag

Antwoord 5

probeer dit

.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}
.div a:hover
{
background-color:#080808;
color:white;
}

laten we zeggen dat we een ankertag hebben gebruikt in onze code en class “div” wordt aangeroepen in het hoofdprogramma. de a:hover zal het ding doen, het geeft een vampierzwarte kleur aan de achtergrond en een witte kleur aan de tekst wanneer de muis erover wordt bewogen, dat is wat hover betekent.

Antwoord 6

Een veelvoorkomende fout is het achterlaten van een spatie voor de klassenamen. Zelfs als dit de juiste syntaxis was:

.menu a:hover .main-nav-item

het zou nooit hebben gewerkt.

Daarom zou je niet schrijven

.menu a .main-nav-item:hover

het zou zijn

.menu a.main-nav-item:hover

Antwoord 7

Ik heb ontdekt dat als je een !importanttoevoegt, het werkt als het voorheen niet werkte.

   a.main-nav-item:link {
      color: blue !important; 
    }
    a.main-nav-item:visited {
      color: red !important; 
    }
    a.main-nav-item:hover {
      color: purple !important; 
    }
    a.main-nav-item:focus {
      color: green !important; 
    }
    a.main-nav-item:active {
      color: green !important; 
    }

Ook heb ik ergens gelezen dat de volgorde belangrijk is. Het geheugensteuntje “LoVe HaTe” helpt je het te onthouden: link -> bezocht -> zweven -> actief