Change multiple div's on hover another div

Question

I've found a lot of similar problems, but none with a solution for mine.

I've got 3 images displayed next to each other. The images are background-image with CSS. I explain why later:

<div class="team-photo-container">

<div class="team-photo-wrapper">

    <div class="team-photo david"></div>

    <div class="team-photo charlotte"></div>

    <div class="team-photo timon"></div>

</div>

When I hover over the first image ( .david ) I want the background-image of the other two ( .charlotte and .timon ) to change. I got this to work with this:

.charlotte:hover ~ .david {
background-image: url(../../images/basic-david-right.jpg) !Important;
}

.charlotte:hover ~ .timon {
    background-image: url(../../images/basic-timon-left.jpg) !Important;    
}

NOW MY PROBLEM:

I want the same to happen to the other images. So when I hover on .charlotte I want the background image for .david and .timon to change. BUT it only changes .timon . When I try the hover code on .timon , neither one change...

I think the code doesn't work when the div is in front of the hover div...

I hope you guys understand my question! Sorry for pour English, I'm Dutch.

David

Answer 1

I'd suggest you try some jQuery like so:

 $(document).on('mouseenter', '.block', function() { var that = $(this); that.removeClass('nearTarget').addClass('target'); $('.block').not(this).addClass('nearTarget').removeClass('target'); }).on('mouseleave', '.block', function() { var that = $(this); $('.block').removeClass('nearTarget target'); }) 

 .block { width: 100px; height: 80px; float: left; margin: 10px; background-color: green; } .block.target { background-color: red; } .block.nearTarget { background-color: #999; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="wrapper"> <div id="one" class="block"></div> <div id="two" class="block"></div> <div id="three" class="block"></div> </div> 

Answer 2

It's normal, if you read the W3C specifications:

E ~ F ===> an F element preceded by an E element

Source: http://www.w3.org/TR/css3-selectors/#selectors

It's just the next elements that are targeted not previous.
No selector allows you to do what you want.

But you can try something like this:

// Hover sibling states
.team-photo-wrapper:hover .charlotte {
    background-image: url(../../images/hover-david-right.jpg);
}

.team-photo-wrapper:hover .timon {
    background-image: url(../../images/hover-timon-left.jpg);    
}

// Basic states
.team-photo-wrapper .charlotte {
    background-image: url(../../images/basic-david-right.jpg) !important;
}
.team-photo-wrapper .timon:hover {
    background-image: url(../../images/basic-timon-left.jpg) !important;    
}

Answer 3

It may be more straightforward doing it with jQuery:

$(".team-photo").hover(function() {
    $(this).siblings("div").addClass("hover");
}, function() {
    $(this).siblings("div").removeClass("hover");
});

See JSFiddle

As you're using background images, you would want to convert the hover class in my Fiddle's CSS to something like this...

.david.hover {
    background-image: url(../../images/basic-david-right.jpg) !Important;
}
.timon.hover {
    background-image: url(../../images/basic-timon-right.jpg) !Important;
}

Answer 4

If you want to do this with pure CSS, this might work (Sass code, see Codepen here ):

.team-photo-wrapper
  width: 400px // or something…
.team-photo
  width: 400px
  height: 200px
  background-size: cover
.david
  background-image: url("http://lorempixel.com/399/200/")
  &:hover
    background-image: url("http://lorempixel.com/300/150")
.charlotte
  background-image: url("http://lorempixel.com/400/200/")
  &:hover
    background-image: url("http://lorempixel.com/300/150")
.timon
  background-image: url("http://lorempixel.com/401/200/")
  &:hover
    background-image: url("http://lorempixel.com/300/150")

// Magic part  
.team-photo-wrapper:hover :not(:hover)
  background-image: url("http://lorempixel.com/402/200/")

If you need different images for the different people, you could chain the class to the selector, eg .team-photo-wrapper:hover :not(:hover).timon

Please be careful, the :not selector has a pretty bad performance if used too often…