Question

需要有关兄弟选择器的帮助。我试图通过将鼠标悬停在另一个元素上来影响元素。

这是我的代码。

<div class="_3-block">
    <div class="w-hidden-small block-3-inner last">
    <div class="block-3-image-container">
        <a href="#"><img class="image" src="images/bg_1.jpg" alt="bg_1.jpg"></a>
    </div>
    <div class="block-3-text-container">
        <a href="#"><h1 class="block-3-heading">XXX søknad, utbetaling av støtte, rapportering</h1></a>
    </div>
    </div>
</div>

这是css：

.block-3-image-container ~ .block-3-heading {
   -webkit-transition: color 500ms ease;
   -o-transition: color 500ms ease;
    transition: color 500ms ease;
    text-decoration: none;
}
.block-3-image-container:hover ~ .block-3-heading {
    color: #999;
    text-decoration: none;
}

任何帮助表示赞赏：）

Answer 1

来自MDN：〜combinator分隔两个选择器，只有当第一个元素前面有第二个元素时才匹配第二个元素，并且它们共享一个共同的父元素。

您需要更新选择器以包含.block-3-image-container前面的元素，在这种情况下是.block-3-heading的父元素。这是更新的选择器：

.block-3-image-container:hover ~ .block-3-text-container .block-3-heading {
    color: #999;
    text-decoration: none;
}

jsfiddle：http://jsfiddle.net/THtpx/

一般兄弟选择器

1 个答案: