Question

我正在尝试在悬停时在两个字体真棒图标之间切换，但是可见性属性似乎没有更新。我最初将fa-circle设置为不可见，但希望它在悬停时可见。我还希望fa-circle-thin在悬停时不可见，因为它当前是可见的。角度向下图标似乎是在悬停时更新颜色，所以我很困惑为什么其他两个图标不会更新。

a {
   color: #004E7b;
}

.fa-circle-thin:hover {
   visibility: hidden;
}

.fa-circle {
   visibility: hidden;
   color: #004e7b;
}

.fa-circle:hover {
   visibility: visible;
   color: #004e7b;
}

.fa-angle-down:hover {
   color: #ffffff;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="">
  <span class="fa-stack fa-2x">
    <i class="fa fa-circle-thin fa-stack-2x"></i>
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-angle-down fa-stack-2x"></i>
  </span>
</a>

我在这里创造了一个小提琴：http://jsfiddle.net/pingo_/sw6w3vLg/

请看看你是否可以提供帮助。

谢谢！

编辑：

在这里提出解决方案：http://jsfiddle.net/pingo_/u3vkbg8v/

Answer 1

我认为你想要.fa-stack:hover > .fa-circle而不是.fa-circle:hover。

@import 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';
a {
  color: #004E7b;
}
.fa-circle {
  visibility: hidden;
  color: #004e7b;
}
.fa-stack:hover > .fa-circle {
  visibility: visible;
  color: #004e7b;
}
.fa-angle-down:hover {
  color: #ffffff;
}

<a href="">
  <span class="fa-stack fa-2x">
    <i class="fa fa-circle-thin fa-stack-2x"></i>
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-angle-down fa-stack-2x"></i>
  </span>
</a>

Font Awesome：悬停可见性属性错误

1 个答案: