在 li 的悬停上使锚点颜色不同？答案

【问题标题】：On hover of li make anchor different color?在 li 的悬停上使锚点颜色不同？
【发布时间】：2016-12-06 22:47:09
【问题描述】：

我在这里通过将锚标记的宽度设置为 100% 来寻找解决问题的方法，但似乎没有任何效果。

想要的效果是让整个 li 成为一个锚标签，以便在 li 悬停时锚的颜色会发生变化，并且整个 li 是可点击的

.totem-container {
  background-color: #ffffff;
  width: 200px;
  color: #222222;
  padding-top: 200px;
}

.totem-list {
  width: 200px;
}

.totem-list li {
  width: 200px;
  height: 35px;
  list-style: none;
  transition: all .1s ease-in-out;
  -webkit-box-shadow: 0 4px 10px -6px #222;
  -moz-box-shadow: 0 4px 10px -6px #222;
  box-shadow: 0 4px 10px -6px #222;
}

.totem-list li:hover {
  transform: scale(1.1);
}

.totem-list a {
  color: #222222;
  list-style: none;
  text-decoration: none;
  font-size: 16px;
  line-height: 35px;
  width: 100%;
  height: 100%;
}

.totem-list a:hover {
  color: #78A025; !important
}

.totem-list i {
  font-size: 25px;
  margin-top: 5px;
  width: 35px;
  margin-left: 5px;
  color: #4f4f4f;
}
 
.totem-list i.social {
  font-size: 35px;
  text-align: center;
  margin: 1px;
  color: #007DC3;
  transition: all .1s ease-in-out;
}

.totem-list i.social:hover {
  transform: scale(1.1);
  color: #78A025;
}

<head>

</head>

<body>
  <div class="totem-container center-block pull-right">
    <ul class="totem-list">
      <a href="#"><i class="fa fa-facebook-square social"></i></a>
      <a href="#"><i class="fa fa-twitter-square social"></i></a>
      <a href="#"><i class="fa fa-google-plus-square social"></i></a>
      <a href="#"><i class="fa fa-youtube-square social"></i></a>
      <li>
        <i class="fa fa-user"></i>
        <a href="#">Sign Up</a>
      </li>
      <li>
        <i class="fa fa-phone"></i>
        <a href="#">Contact Sales</a>
      </li>
      <li>
        <i class="fa fa-sign-in"></i>
        <a href="#">Log In</a>
      </li>

    </ul>
  </div>
  </body

为了实现这一目标，我需要进行哪些更改？

【问题讨论】：

您的 HTML 无效。 <a> 不能是 <ul> 的子代

标签： css hover html-lists anchor

【解决方案1】：

您可以使用 CSS Flexbox。将您的 <li> 设为弹性容器以使其全宽。对于悬停，您可以在 <li> 上执行 :hover 并使您的 <a> 具有不同的颜色，例如：

.totem-list li {
  display: flex;
}

.totem-list li:hover a {
  color: #78A025; !important
}

看看下面的sn-p：

.totem-container {
  background-color: #ffffff;
  width: 200px;
  color: #222222;
  padding-top: 200px;
}

.totem-list {
  width: 200px;
}

.totem-list li {
  display: flex;
  width: 200px;
  height: 35px;
  list-style: none;
  transition: all .1s ease-in-out;
  -webkit-box-shadow: 0 4px 10px -6px #222;
  -moz-box-shadow: 0 4px 10px -6px #222;
  box-shadow: 0 4px 10px -6px #222;
}

.totem-list li:hover {
  transform: scale(1.1);
}

.totem-list li:hover a {
  color: #78A025; !important
}

.totem-list a {
  flex: 1;
  color: #222222;
  list-style: none;
  text-decoration: none;
  font-size: 16px;
  line-height: 35px;
  width: 100%;
  height: 100%;
}

.totem-list a:hover {
  color: #78A025; !important
}

.totem-list i {
  font-size: 25px;
  margin-top: 5px;
  width: 35px;
  margin-left: 5px;
  color: #4f4f4f;
}
 
.totem-list i.social {
  font-size: 35px;
  text-align: center;
  margin: 1px;
  color: #007DC3;
  transition: all .1s ease-in-out;
}

.totem-list i.social:hover {
  transform: scale(1.1);
  color: #78A025;
}

<head>

</head>

<body>
  <div class="totem-container center-block pull-right">
    <ul class="totem-list">
      <a href="#"><i class="fa fa-facebook-square social"></i></a>
      <a href="#"><i class="fa fa-twitter-square social"></i></a>
      <a href="#"><i class="fa fa-google-plus-square social"></i></a>
      <a href="#"><i class="fa fa-youtube-square social"></i></a>
      <li>
        <i class="fa fa-user"></i>
        <a href="#">Sign Up</a>
      </li>
      <li>
        <i class="fa fa-phone"></i>
        <a href="#">Contact Sales</a>
      </li>
      <li>
        <i class="fa fa-sign-in"></i>
        <a href="#">Log In</a>
      </li>

    </ul>
  </div>
  </body

希望这会有所帮助！

【讨论】：