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

当鼠标悬停在页面上的其他元素上时，我想更改

div

的背景图像。例如，在我的项目中，我有两个

div

，如果我将内容为“nature”的元素悬停，那么它将更改

显示
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;           
    }        

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

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

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

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

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

HTML:

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

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

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

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

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

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


请使用以下命令：


$（“.divOne”）.find（“#one”）.hover（函数（）{
$（“.show”）.css（“背景”、“绿色”）；
});
$（“.divOne”）.find（#two”）.hover（函数（）{
$（“.show”）.css（“背景”、“蓝色”）；
});
$（“.divOne#one，.divOne#two”）.mouseleave（函数（）{
$（“.show”）.css（“背景”、“无”）；
});



测试背景
我有一个不同的例子，但与您有关。
#红色的
{
背景色：红色；
}
#绿色的
{
背景颜色：绿色；
}
#红色：悬停~#绿色
{
颜色：橙色；
}
红色
绿色
既然您在评论中提到要考虑使用JS/jQuery，您可以使用jQuery的
切换类
并将其绑定到悬停事件：

jQuery:

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

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

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

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

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

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

然后使用CSS，我们可以设置
.green
/
.red
类的样式，以便在附加到
.show
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;           
    }        

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

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

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

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

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

HTML:

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

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

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

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

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

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


节目组
#一个
和
#两个
不是
#show
（这就是
~
的意思）。将
#show
放在链接后的
#divOne
内，以便工作。它必须是两个不同的div。请忽略css代码。告诉我，为了实现我的目标，我需要修改css和html代码。我知道当我把第二个div放在第一个div中时它会起作用。但是我应该是两个不同的div。对于给定的标记，这种效果在纯CSW中是不可能的。为什么你不使用
Javascript
或
jQuery
？我有一个jQuery的解决方案，你需要吗