Couleur de survol 'ul li' avec lien hypertexte à l'intérieur

Question

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

Answer 1

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

Answer 2

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

Answer 3

Ajoutez également cette ligne dans votre CSS:

ul li:hover a{
    color: white;
}

0

Peter Mortensen 17 déc. 2017 à 10:10

Answer 4

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

Couleur de survol 'ul li' avec lien hypertexte à l'intérieur

4 réponses

De nouvelles questions

css