Question

我想要两个中的第一个＆lt;我＆gt;不悬停时要显示的元素和要隐藏的另一个元素，当悬停时我想要相反的方式。这可能与CSS或我需要使用JS吗？

<a class="btn btn-like postb2" href="#">
    <i class="sprite-io sprite-like-grey"></i>
    <i class="sprite-io sprite-like-white"></i>
    3
</a>

Answer 1

.postb2 .sprite-like-grey,
.postb2:hover .sprite-like-white {
    display: none;
}
.postb2:hover .sprite-like-grey {
    display: inline;
}

Demo

您可以更改它以适合您的HTML（顺便说一下。我的代码中没有看到三个i）

Answer 2

我想我对你想要的东西有所了解，而且仅在CSS中它实际上是可行的。

如果你想在悬停锚标记时显示不同的精灵，我会稍微改变一下标记。

<a class="btn btn-like postb2" href="#">
    <i class="sprite-io sprite-like"></i>
    3
</a>

您可能只想更改CSS-sprite中要显示的内容的坐标，而不是在两个HTML节点之间切换：

.postb2 .sprite-like{
    background-position: -80px -80px; // just some arbitrary coordinates for example purposes
}

.postb2:hover .sprite-like{
    background-position: -160px -160px;
}

另一个注意事项：

我看到你使用的名称是“sprite-like-grey”和“sprite-like-white”。我会避免在它们出现在特定点之后命名我的css规则，而是在它们实际存在或在应用程序中执行之后命名它们。

Answer 3

知道你的案例已经有了最好的答案，但我发现你的问题和Mr_Green评论可能有用。

如果元素与其他元素相邻，则可以使用+使用组合符在CSS中定位兄弟元素，如果不存在，则可以~（它们需要在同一个父元素中）。

Little Fiddle to show

More info on W3C Website

隐藏一个元素并在悬停时显示另一个元素

3 个答案: