Изменить несколько div на hover еще один div

Question

Я нашел много подобных проблем, но ни одного решения для моего.

У меня есть 3 изображения, отображаемые рядом друг с другом. Изображения представляют собой фоновое изображение с помощью CSS. Я объясню, почему позже:

<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> 

Когда я наведите курсор мыши на первое изображение (.david) Я хочу фоновое изображение двух других (.charlotte и .timon), чтобы изменить. Я получил эту работу с этим:

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

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

ТЕПЕРЬ МОЯ ПРОБЛЕМА:

Я хочу, чтобы то же самое произойдет с другими изображениями. Поэтому, когда я нахожусь на .charlotte, я хочу получить фоновое изображение для .david и .timon для изменения. НО это только изменяет .timon. Когда я пытаюсь код парения на .timon, ни одно изменение ...

Я думаю, что код не работает, когда DIV находится в передней части парения DIV ...

Я надеюсь, что вы, ребята понимают, что я вопрос! Извините за английский, я голландский.

Дэвид

Answer 1

Я предлагаю вам попробовать некоторые JQuery так:

$(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

Это нормально, если читать W3C спецификации:

E ~ F ===> элемент F, которому предшествует элемент E

Источник: http://www.w3.org/TR/css3-selectors/#selectors

Это просто следующие элементы, которые ориентированы не предыдущий.
Селектор не позволяет делать то, что вы хотите.

Но вы можете попробовать что-то вроде этого:

// 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

Это может быть более простым делать это с JQuery:

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

See JSFiddle

Как вы используете фоновые изображения, вы хотел бы преобразовать класс hover в мой CSS-скрипт к чему-то вроде этого ...

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

Answer 4

Если вы хотите сделать это с чистым CSS, это может работать (Sass код, см 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/") 

Если вам нужны различные изображения для разных людей, вы можете приковать класс к селектору, например .team-photo-wrapper:hover :not(:hover).timon

Пожалуйста, обратите внимание, то: не селектор имеет довольно плохую производительность, если используется слишком часто ...