Question

我不知道为什么:hover无法处理我的fontawesome元素。我想在悬停时将圆形元素更改为红色。我想我已经尝试了所有可能的选择器，并且只有.fa以某种方式做出反应（图标颜色内部改变了，这不是我想要的效果。）

HTML

    <ul class="nav__social-items">
        <li><a class="nav--links"  href="#"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse" aria-hidden="true"></i></span>
        </a></li>
        <li><a class="nav--links"  href="#"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-youtube fa-stack-1x fa-inverse" aria-hidden="true"></i></span>
        </a></li>
        <li><a class="nav--links"  href="#"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-instagram fa-stack-1x fa-inverse" aria-hidden="true"></i></span>
        </a></li>
    </ul>

CSS

.nav__social-items {
    display: flex;
    flex: 3 1 0;
    justify-content: flex-end;
    @include mQ(485px){
        li {
        display: block;
        width: 20%; 
             }

    }
    .nav--links{
        margin-left: 30px;
        .fa-circle{
            color: #000;
        }
    }
}

Answer 1

我已经非常快速地修改了代码，以显示另一种方法。只需按下面的“运行代码段”，看看这是否是你所追求的：）

此处带有图标的示例：https://codepen.io/anon/pen/bYYMJO

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li a {
  width: 30px;
  height: 30px;
  background: blue;
  border-radius: 50%;
  float: left;
  text-align: center;
  box-sizing: border-box;
  padding-top: 6px;
  cursor: pointer;
}
ul li a:hover {
  background: red;
}
ul li i {
  text-align: center;
  color: white;
  font-size: 14px;
}

<ul>
  <li>
    <a href="/">
      <i class="fa fa-facebook" aria-hidden="true"></i>
    </a>
  </li>
</ul>

悬停效果不会对堆叠的fontawesome图标

1 个答案: