字体真棒：悬停可见性属性错误

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>

我在这里创建了一个fiddle：http://jsfiddle.net/pingo_/sw6w3vLg/

请看看你能不能帮上忙。

谢谢！

编辑：

Fiddle 解决方案在这里：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 :hover visibility attribute error

css

font-awesome