前一个div的CSS选择器

Question

<div class="main">
    <div class="content">
        <div class="content_hide">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
    </div>
    <div class="sidebar">
        <div class="single_sidebar">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
    </div>
</div>

这是我的HTML代码。当我悬停single_sidebar元素时，我想要样式content_hide div。

之类的东西

.single_sidebar:hover @@content_hide {background:red}

当我将鼠标悬停在content_hide时，如何通过CSS选择single_sidebar div？

Answer 1

目前在CSS中无法这样做。也许只能在CSS4 with !。

您必须整合JavaScript。

就像一个例子，在jQuery中：

$(".single_sidebar").on("mouseenter mouseleave", function(event) {
  $(this).closest(".main").find(".content_hide").toggleClass("someStyleClass");
});