html - 如果悬停之前的文本，如何在图像上启用悬停效果？

Question

如果 .text 悬停，我如何也有 .imageis？

<a href="#" class="text">All My Clipboards</a>
        <a class="imageis sprite_image_base" href="#"></a>

我尝试在我的 CSS 中做这样的事情：

.text:hover, .imageis:hover + .text {
    background-position: -107px -311px !important;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    width: 23px;
}

注意：我想用没有 jquery 的纯 css 来做到这一点。

Answer 1

我不知道为什么其他人使用 Javascript，这很容易用 CSS 完成。

您使用相邻的兄弟组合器或通用兄弟组合器。

首先，声明您希望 .text 悬停以发生某些事情，例如：.text:hover，然后添加兄弟组合：~或+，最后选择您想要影响的兄弟，在这种情况下：.imageis。

把它放在一起，你会得到：

.text:hover + .imageis {
    /* css-stuff */
}

您还可以选择两个元素的父元素并执行常规的后代选择器，如下所示：

.parent:hover .imageis {
    /* css-stuff */
}