CSS Selector for a previus div

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>

This is my HTML code. When I hover single_sidebar element, I want style content_hide div. something like

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

How can I select content_hide div by CSS when I hover single_sidebar?

If you change your markup so that the content_hide div comes after your sidebar div this can be easily done — Danield, Aug 06 '13 at 09:05
http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered — daniel__, Aug 06 '13 at 09:06

score 3 · Accepted Answer · answered Aug 06 '13 at 09:05

Currently there's no way to do so in CSS. Maybe only in CSS4 with !.

You will have to incorporate JavaScript.

Just as an example, in jQuery:

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

CSS Selector for a previus div

1 Answers1