Ondersteuning » Algemeen WordPress » link css alleen op tekst, niet op menu-item

  • Mijn menu bestaat uit een ul met li’s:

    <div class="topnavigationgroup">
    <div class="menu"><ul><li class="page_item page-item-25 current_page_item"><a href="http://localhost/">home</a></li><li class="page_item page-item-18"><a href="http://localhost/?page_id=18">contact</a></li><li class="page_item page-item-21"><a href="http://localhost/?page_id=21">login</a></li></ul></div></div>

    (ingekort met een aantal li’s)
    .current_page_item {
    background-color: #0C0;
    }

    werkt als verwacht, maar

    .page_item a:hover {
    background-color: #F5DC32;
    color:#333;
    }

    verandert alleen de kleur onder de tekst, niet het hele item.

    .topnavigationgroup ul li a levert hetzelfde resultaat.

    Vraag:
    1) hoe krijg ik de kleur on hover etc. ovet het hele item?
    2) ik begrijp niet wanneer ik een kenmerk op page_item moet zetten en wanneer op .topnavigationgroup ul li

    Kan iemand me helpen?

    (ik kan de site niet live laten zien, want ik werk op een lokaal servertje)

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Ik begrijp niet zo goed wat je wil zeggen?

    Maar een link werkt normaal zo:

    Stel we hebben een Menu en in de menu staat een item dat heet About

    De html code ziet er als volgt uit.

    <ul>
    <li class="page_item">Home</li>
    <li class="page_item"><a href="http://example.com/about/">About</a></li>
    </ul>

    En dit is de CSS:
    Even voor de duidelijkheid drie keer nul = zwart en drie keer F = wit.

    .page_item {
         color: #000;
         background: #fff;
    }
    
    .page_item a {
         color: #333;
         background: #fff;
    }
    
    .page_item a:hover {
         color: #fff;
         background: #000;
    }

    Zoals je ziet staat in de CSS drie keer de class page_item de eerste keer is het alleen de class de tweede keer is het de class met een linkje en de derde keer een class met een linkje+Hover.

    Kijkende naar de HTML dan zien we dat Home in het menu geen linkje bevat omdat deze niet tussen de <a href..> Tag staat. Dus we kunnen niet klikken op het linkje Home, Home is geen button maar gewoon tekst maar Home heeft wel een Class aan de lijst hangen en deze is het zelfde als die van de About menu. namelijk de class “page_item”

    Nu zal de Home tekst in het menu gebruik maken van de eerste optie in de CSS code (die zonder linkje) en daarom zal de Home tekst een Zwarte kleur zijn met een Witte achtergrond.

    De About tekst staat wel tussen aan <a href..>en is dus wel een linkje. Nu is het een ander verhaal. Je browser zal dus kijken naar de CSS code en dan zien dat de class page_item ook een A tag heeft en dus een linkje is daarom komt de eerste optie te vervallen en neemt de Browser de tweede optie die met het linkje.
    Dus About zal niet Zwarte tekst zijn met een Witte achtergrond maar #333 (Das donker Grijs) met een Witte achtergrond.
    Maar er staat achter de tweede keuze ook nog een optie A:Hover dat wil zeggen als je met je muis er over heen gaat dan neem je browser de stijlen die daar bij horen. Dus zou je met je muis over About gaan dan neem je browser de Hover versie (opties 3) en zal de kleur ook veranderen van optie 2 naar optie 3. Witte tekst en een zwarte achtergrond.

    Thread starter Translatoria

    (@translatoria)

    Reuze bedankt voor je uitgebreide en duidelijke uitleg. Ik ga er morgen mee aan de slag. Maar in mijn html staat Home toch wel tussen links tags? Zie in mijn html voorbeeld van (een deel van) mijn menu <a href="http://localhost/">home</a>

    Maakt niet uit, ik ga het morgen met een fris hoofd nog eens bekijken.
    Dank!

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Het onderwerp ‘link css alleen op tekst, niet op menu-item’ is gesloten voor nieuwe reacties.