Question

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

我的代码如下：

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

请使用此：

＆＃13;

$(".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");
});

＆＃13;

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

＆＃13;

Answer 2

我有一个不同的例子，但与你有关。＃红色 { 背景色：红色; } ＃绿色 { 背景色：绿色; } #red：悬停〜＃绿 { 颜色为橙色; } 红色绿色

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>

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

3 个答案: