Question

我通过使我的锚标签的宽度为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

为了达到这个目的，我需要改变什么？

Answer 1

您可以使用 CSS Flexbox 。使<li>一个flex容器使其成为全宽。对于悬停，您可以:hover <li>进行<a>并制作不同颜色的.totem-list li { display: flex; } .totem-list li:hover a { color: #78A025; !important }，例如：

.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

batterystatus event

希望这有帮助！

李的悬停使锚成不同的颜色？

1 个答案: