将鼠标悬停在一个Div中的元素上，该Div会更改另一个Div CSS的背景图像

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.

当我将鼠标悬停在页面上的其他元素上时,我想更改div的背景图像。例如,在我的项目中我有两个div,如果我将元素悬停在内容“nature”中,那么它将改变show div的背景图像。

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>    

3 个解决方案

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

#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

我有一个不同的例子,但与你有关。 #red {background-color:red; } #green {background-color:green; } #red:hover~#green {color:orange;红绿色

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

既然你提到你在评论中使用JS / jQuery,你可以使用jQuery的toggleClass并将其绑定到悬停事件: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 / .red类的样式,以便在附加到.show div时执行我们喜欢的操作(如果您愿意,可以使用背景图像)。

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>