当鼠标悬停在父 div 上时更改子 div 的背景图像答案

【问题标题】：changing the background image of a child div when the mouse is hovered over the parent div当鼠标悬停在父 div 上时更改子 div 的背景图像
【发布时间】：2015-01-12 23:03:37
【问题描述】：

我在另一个 div 中有一个带有背景图像的 div，我想要实现的是当有人将鼠标悬停在整个父 div 上的任何位置时更改该子 div 的背景图像。

我将如何实现这一目标？

HTML 是这样的：

<div class="parent_div">
<div class="child_div">
</div>
</div>

而子div的背景图片是：

.child_div{
    background-image: url("image.jpg");
}

我试过了：

.child_div:hover{
    background-image: url("image-new.jpg");
}

但是只有当它悬停在子 div 上时才会改变背景，并且由于父 div 有一些我想包含的额外填充，所以它不起作用:(

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这是一个可运行的 sn-p，向您展示 css Descendant 选择器如何工作：

.parent_div{
  height:400px;
  width:100%;
  background:red;
}

.child_div {
  height:200px;
  width:100%;
  background-image: url(http://placekitten.com/g/200/200); /*initial*/
}
.parent_div:hover .child_div{
  background-image: url(http://placekitten.com/g/200/400); /*when parent is hovered*/
}

<div class="parent_div">
  <div class="child_div">
  </div>
</div>

它正在使用 css 选择器：

.parent_div:hover .child_div{
  background:...
}

这意味着当父级悬停时（sn-p中的红色区域），将样式添加到child_div的类中为...

这是因为它使用Descendant 选择器来选择具有悬停的.parent_div 元素的类.child_div。（其他css选择器可以在W3C spec找到）

【讨论】：

【解决方案2】：

应该是

.parent_div:hover .child_div{
    background-image: url("image-new.jpg");
}

基本意思是：当 .parent_div 悬停时，.child_div 背景将是新图像

【讨论】：

【解决方案3】：

您正在为子元素编写样式，但您需要为父元素编写样式：

.parent_div .child_div{
    background-image: url('image.jpg');
}

.parent_div:hover .child_div {
    background-image: url('image-new.jpg');
}

【讨论】：

【解决方案4】：

试试这个 CSS：

.parent {
  width: 150px;
  height: 150px;
}

.parent img.child {
  width: auto; /* or 100% */
  height: auto; /* or 100% */
  background-image: url('old-bkg.png');
}

.parent img.child:hover{
  background-image: url('new-bkg.png');
}

【讨论】：

【解决方案5】：

.parent_div{
    width: 200px;
    height: 200px;
    background: blue;
}

.parent_div:hover .child_div{
    background: red;
}

.child_div{
    width: 200px;
    height: 100px;
}

此处为 jsfiddle 示例：

http://jsfiddle.net/9uu9j220/1/

【讨论】：

【解决方案6】：

.child_div{
   background-image: url("image.jpg");
}
.parent_div:hover .child_div{
   background-image: url("new_hovered_image.jpg");
}

你可以看到更多有用的选择器here

【讨论】：

【解决方案7】：

当你用 JQuery 标记你的问题时，你可以试试这个：

$(document).ready(function(){

  $('.parent_div').hover(function(){
    $('.child_div').css('background-image','url(urImg.jpg)');
  });


});

【讨论】：