Наведите указатель мыши на элемент в одном Div, который изменит фоновое изображение другого Div CSS

Question

Я хочу изменить фоновое изображение div при наведении на другие элементы на странице. Например, в моем проекте у меня есть два div, если я навещу элемент с содержанием «природа», то он изменит фоновое изображение div.

Мой код выглядит следующим образом:

CSS:

.divOne #one:hover ~ .show{ background-image: url(nature.jpg); } 
    .divOne two:hover ~ .show{ background-image: url(bird.jpg); }    
    #show{ 
     height: 100px; 
     width: 100px;   
    }   

HTML:

<div class="divOne"> 
    <a id="one" href="#"> nature </a> 
    <a id="two" href="#"> bird </a> 
</div> 

<div class="show"></div>  

Answer 1

Пожалуйста, используйте это:

$(".divOne").find("#one").hover(function(){ 
 
\t $(".show").css("background","green"); 
 
}); 
 
$(".divOne").find("#two").hover(function(){ 
 
\t $(".show").css("background","blue"); 
 
}); 
 
$(".divOne #one, .divOne #two").mouseleave(function(){ 
 
$(".show").css("background","none"); 
 
});

<div class="divOne"> 
 
    <a id="one" href="#"> nature </a><br/> 
 
    <a id="two" href="#"> bird </a> 
 
</div> 
 

 
<div class="show"> 
 
Test Background 
 
</div>

Answer 2

У меня есть другой пример, но связанный с вами. #red { background-color: red; } #green { background-color: green; } #red: hover ~ # зеленый { цвет: оранжевый; } красный зеленый

Answer 3

Поскольку вы упомянули вы будете выглядеть при использовании JS/JQuery в комментариях, вы можете использовать JQuery-х toggleClass и привязать его к событию парения: https://jsfiddle.net/0pe4mn4o/

jQuery:

$("#one").hover(function() { 
    $(".show").toggleClass("green"); 
}); 
$("#two").hover(function() { 
    $(".show").toggleClass("red"); 
}); 

Затем с помощью CSS мы можем создать классы .green/.red, чтобы делать то, что нам нравится, когда добавлено к .show div (вы можете использовать background-image, если хотите).

CSS:

.green { 
    background-color: green; 
} 
.red { 
    background-color: red; 
} 
#show{ 
    height: 100px; 
    width: 100px; 
} 
.divOne a { 
    display: block; 
    padding: 20px; 
    margin:10px; 
} 

HTML:

<div class="divOne"> 
    <a id="one" href="#"> nature </a> 
    <a id="two" href="#"> bird </a> 
</div> 
<div class="show">SHOW DIV</div>