[CSS, SCSS] :hover, :visited verander style van andere div

[sj31]

Hallo Allen,

Ik heb een vraag.
IK heb momenteel een soort menu gemaakt voor een webinterface. Nu heb ik Li in mijn menu en hierin zit een A. Nu wil ik dat zodra er over de Li of A gehoverd wordt dat de A een andere tekst kleur krijg. Met de A zelf lukt het me wel maar met de Li niet

Ik heb het volgende:

HTML:

<ul class="menu">
    <li class="active" >
       <a href="/">Home</a>
    </li>
</ul>

SCSS:

  ul.menu {
    font-weight: bold;
    height: 24px;
    overflow: visible;
    display: block;
    margin-left: 10px;

    li {
      margin-top: 2px;
      margin-left: 2px;
      margin-right: 2px;
      height: 14px;
      padding: 4px;
      border: 2px solid black;
      margin: 0;
      background-color: black;
      display: inline-block;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      color:white;

      &.active, &:hover {
        border-bottom: 2px solid black;
        background-color: #FED200;}

      a {
        display: inline-block;
        min-width: 100px;
        color: white;
        text-decoration: none;
        background: none; }

      a:hover, a:visited {
        display: inline-block;
        min-width: 100px;
        color: black;
        text-decoration: none;
        background: none; } } }

Hierna wordt de tekst(A) altijd zwart terwijl ik bij het een na laatste blok heb aangegeven dat de color wit moet zijn en bij het laatste blok alleen als er :hover of :visited event is.

Wie zou mij kunnen helpen om er voor te zorgen dat de tekst zodra er ik eroverheen ga met mijn muis de Li geel wordt en de tekst zwart en als het normaal is de Li zwart en de tekst wit.

Alvast bedankt!

[moijamie]

Snap niet helemaal wat je bedoeld maar je kan dit proberen.

code:

li{
 background-color: black;
}

li a{
 color: white
}
li:hover{
 background-color: yellow;
}
li:hover a{
 color:black;
}

[ Voor 16% gewijzigd door moijamie op 05-06-2015 09:08 ]

[sj31]

moijamie schreef op vrijdag 05 juni 2015 @ 09:06:
Snap niet helemaal wat je bedoeld maar je kan dit proberen.

code:

li{
 background-color: black;
}

li a{
 color: white
}
li:hover{
 background-color: yellow;
}
li:hover a{
 color:black;
}

Als ik over de Li of A heen ga dat de achtergrond kleur van de Li geel wordt en dat de tekstkleur van de A zwart wordt, en aangezien dit wat jij stuurt niet van toepassing is aangezien het SCSS is en niet normale CSS.

De Li zit in de Ul en de A zit in de Li. Bij SCSS dus ook in het bestand zelf, kan je ook aan de open en sluit haakjes zien.

Ik heb dit van jou geprobeerd maar de tekstkleur blijft wit, de achtergrond kleur was al wel gelukt maar de tekstkleur blijft ook al ga ik over de Li heen.

[JaPPa03]

sj31 schreef op vrijdag 05 juni 2015 @ 09:15:
[...]


Als ik over de Li of A heen ga dat de achtergrond kleur van de Li geel wordt en dat de tekstkleur van de A geel wordt, en aangezien dit wat jij stuurt niet van toepassing is aangezien het SCSS is en niet normale CSS.

De Li zit in de Ul en de A zit in de Li. Bij SCSS dus ook in het bestand zelf, kan je ook aan de open en sluit haakjes zien.

Ik heb dit van jou geprobeerd maar de tekstkleur blijft wit, de achtergrond kleur was al wel gelukt maar de tekstkleur blijft ook al ga ik over de Li heen.

Dit is gewone CSS hoor. Het zijn compound selectors die je gewoon in CSS kunt (en zult moeten) gebruiken.

[moijamie]

sj31 schreef op vrijdag 05 juni 2015 @ 09:15:
[...]


Als ik over de Li of A heen ga dat de achtergrond kleur van de Li geel wordt en dat de tekstkleur van de A zwart wordt, en aangezien dit wat jij stuurt niet van toepassing is aangezien het SCSS is en niet normale CSS.

De Li zit in de Ul en de A zit in de Li. Bij SCSS dus ook in het bestand zelf, kan je ook aan de open en sluit haakjes zien.

Ik heb dit van jou geprobeerd maar de tekstkleur blijft wit, de achtergrond kleur was al wel gelukt maar de tekstkleur blijft ook al ga ik over de Li heen.

Heb mijn vorige post even in een fiddle gezet en bij mij werkt het gewoon

http://jsfiddle.net/1khkdh8L/

[sj31]

moijamie schreef op vrijdag 05 juni 2015 @ 09:21:
[...]


Heb mijn vorige post even in een fiddle gezet en bij mij werkt het gewoon

http://jsfiddle.net/1khkdh8L/

Inderdaad, in de fiddle werkt het inderdaad. Maar als ik het toepas aan mijn CSS bestand werkt het niet helaas. Ik zou alleen niet weten waarom.

[sj31]

Toch gelukt. Met dank aan mijn collega.

Bedankt voor jullie hulp!

[JaPPa03]

sj31 schreef op vrijdag 05 juni 2015 @ 09:38:
Toch gelukt. Met dank aan mijn collega.

Bedankt voor jullie hulp!

Zou je de fix nog even willen toelichten?

[sj31]

De uiteindelijk werkende oplossing

Cascading Stylesheet:

#header {
  background-color: #fff;
  border-bottom: 2px solid black;
  border-top: 18px solid #FED200;

  ul.menu {
    font-weight: bold;
    height: 24px;
    overflow: visible;
    display: block;
    margin-left: 10px;

    li {
      margin-top: 2px;
      margin-left: 2px;
      margin-right: 2px;
      height: 14px;
      padding: 4px;
      border: 2px solid black;
      margin: 0;
      background-color: black;
      display: inline-block;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      color:white;

      &.active, &:hover {
        border-bottom: 2px solid black;
        background-color: #FED200;}

      a, a:hover, a:visited  {
        display: inline-block;
        min-width: 100px;
        color: white;
        text-decoration: none;
        background: none; } }

li{
 background-color: black;
}

li a{
 color: white;
}
li:hover, li.active{
 background-color: #FAD200;
}
li:hover a, li.active a{
 color:black;
} }

De Fiddle van @moijamie was wel goed alleen zat er geen .active bij. Dit had mijn collega even gezegd en dat werkte.

Bedankt allemaal voor het helpen

[endness]

Even terzijde, die margin op je li is natuurlijk onzin op deze manier. Eerst geef op 3 regels code de margin voor boven, links en rechts op, om ze vervolgens op regel 20 weer allemaal weg te gooien