Hover on element in one Div that changes the background image of another Div CSS

Question

I want to change a div 's background image when hovering over other elements on the page. For example, in my project I have two div 's, if I hover the element with the content "nature", then it will change the show div 's background image.

My code is as follows:

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

Please use this:

 $(".divOne").find("#one").hover(function(){ $(".show").css("background","green"); }); $(".divOne").find("#two").hover(function(){ $(".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

i have a different example, but related to you. #red { background-color:red; } #green { background-color:green; } #red:hover~#green { color: orange; } red green

Answer 3

Since you mentioned you'd look at using JS / jQuery in your comments, you could use jQuery's toggleClass and bind it to a hover event: https://jsfiddle.net/0pe4mn4o/

jQuery:

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

Then with CSS we can style the .green / .red classes to do what we like when appended to the .show div (you can use a background-image if you prefer).

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>