Considérer:

ul {
  list-style-position: inside;
}

ul li {
  border-radius: 7px;
  line-height: 21px;
  padding: 0 9px;
  letter-spacing: 0.5px;
}

ul li a {
  color: #555;
}

ul li:hover {
  background: #0099cc;
  color: white;
}

ul li a:hover {
  color: white;
}
<div class='titlewrap'>
  <ul>
    <li class='title'><a href='view.php?id=1' target='_blank'>lorem ipsum</a></li>
    <li class='title'><a href='view.php?id=2' target='_blank'>lorem ipsum</a></li>
    <li class='title'><a href='view.php?id=3' target='_blank'>lorem ipsum</a></li>
    <li class='title'><a href='view.php?id=4' target='_blank'>lorem ipsum</a></li>
  </ul>
</div>

En survolant, la couleur li a est changée en blanc, mais lorsque je déplace le pointeur en dehors de a et toujours à l'intérieur de li - la couleur est à nouveau #555.

css
0
qadenza 15 nov. 2017 à 09:55

4 réponses

Meilleure réponse

ul li a est plus spécifique que ul li:hover.
Faites plutôt que la balise d'ancrage imbriquée hérite son color de sa balise d'élément de liste contenant.

ul li a {
    color: inherit;
}
ul {
  list-style-position: inside;
}

ul li {
  border-radius: 7px;
  line-height: 21px;
  padding: 0 9px;
  letter-spacing: 0.5px;
}

ul li a {
    color: inherit;
}

ul li:hover {
  background: #0099cc;
  color: white;
}

ul li a:hover {
  color: white;
}
<div class='titlewrap'>
  <ul>
    <li class='title'><a href='view.php?id=1' target='_blank'>lorem ipsum</a></li>
    <li class='title'><a href='view.php?id=2' target='_blank'>lorem ipsum</a></li>
    <li class='title'><a href='view.php?id=3' target='_blank'>lorem ipsum</a></li>
    <li class='title'><a href='view.php?id=4' target='_blank'>lorem ipsum</a></li>
  </ul>
</div>
0
UncaughtTypeError 15 nov. 2017 à 07:01

Actuellement, vous définissez la couleur avec ul li a, qui a une spécificité plus élevée que ul li:hover.

Je crois que vous recherchez ul li:hover a au lieu de ul li a:hover.

ul {
  list-style-position: inside;
}

ul li {
  border-radius: 7px;
  line-height: 21px;
  padding: 0 9px;
  letter-spacing: 0.5px;
}

ul li a {
  color: #555;
}

ul li:hover {
  background: #0099cc;
  color: white;
}

ul li:hover a {
  color: white;
}
<div class='titlewrap'>
  <ul>
    <li class='title'><a href='view.php?id=1' target='_blank'>lorem ipsum</a></li>
    <li class='title'><a href='view.php?id=2' target='_blank'>lorem ipsum</a></li>
    <li class='title'><a href='view.php?id=3' target='_blank'>lorem ipsum</a></li>
    <li class='title'><a href='view.php?id=4' target='_blank'>lorem ipsum</a></li>
  </ul>
</div>
3
jhpratt GOFUNDME RELICENSING 15 nov. 2017 à 06:59

Ajoutez également cette ligne dans votre CSS:

ul li:hover a{
    color: white;
}
0
Peter Mortensen 17 déc. 2017 à 10:10

Utilisez-le à la place

ul li:hover a {
  color: white;
}
ul {
  list-style-position: inside;
}

ul li {
  border-radius: 7px;
  line-height: 21px;
  padding: 0 9px;
  letter-spacing: 0.5px;
}

ul li a {
  color: #555;
}

ul li:hover {
  background: #0099cc;
  color: white;
}

ul li:hover a {
  color: white;
}
<div class='titlewrap'>
  <ul>
    <li class='title'><a href='view.php?id=1' target='_blank'>lorem ipsum</a></li>
    <li class='title'><a href='view.php?id=2' target='_blank'>lorem ipsum</a></li>
    <li class='title'><a href='view.php?id=3' target='_blank'>lorem ipsum</a></li>
    <li class='title'><a href='view.php?id=4' target='_blank'>lorem ipsum</a></li>
  </ul>
</div>
2
Carl Binalla 15 nov. 2017 à 06:59
47301146