Question

考虑：

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>

悬停时，li a颜色会变为白色，但当我将指针移到a之外且仍在li之内时 - 颜色再次为#555。

Answer 1

目前，您使用ul li a设置颜色，其特异性高于ul li:hover。

我相信你所寻找的是ul li:hover a而不是ul li a:hover。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

改为使用

ul li:hover a {
  color: white;
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

ul li a比ul li:hover更具体而是嵌套的锚标记从其包含的列表项标记继承其color。

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>

Answer 4

在CSS中添加此行：

ul li:hover a{
    color: white;
}

'ul li'悬停颜色，里面有超链接

4 个答案: