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完成。

您使用adjacent sibling combinator或general sibling combinator。

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

把它放在一起，你得到：

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

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

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

如果图像前面的文本悬停，我如何在图像上启用悬停效果？

1 个答案: