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

Question

我希望两个 < i > 元素中的第一个在不悬停时显示，另一个隐藏，悬停时我想要相反的方式。这可能与 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;
}

演示

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

Answer 2

知道对于您的情况已经有了最好的答案，但是我刚刚发现了一些关于您的问题和 Mr_Green 评论可能有用的东西。

您确实可以在 CSS 中使用组合器来定位兄弟元素，+如果元素彼此相邻或~不相邻（它们需要在同一个父元素中）。

小小提琴展示

有关 W3C 网站的更多信息

Answer 3

我想我知道你想要什么，实际上仅在 CSS 中是可行的。

如果您想在悬停锚标记时显示不同的精灵，我会以稍微不同的方式创建标记。

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

与其在两个 HTML 节点之间切换，您可能只想更改要在 CSS 精灵中显示的内容的坐标：

.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 规则在某个点的出现方式命名它们，而是根据它们在应用程序中的实际情况或执行情况来命名它们。