Question

我在另一个div中有一个带有背景图像的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有一些我想要包含的额外填充，所以它不起作用：（

Answer 1

这是一个可运行的代码段，向您展示了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:...
}

表示当父项悬停时（代码段中的红色区域），将样式添加到child_div类中...

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

中找到

Answer 2

应该是

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

基本上它意味着：当.parent_div悬停时，.child_div背景将成为新图像

Answer 3

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

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

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

Answer 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');
}

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

Answer 6

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

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

Answer 7

当您使用JQuery标记问题时可以尝试：

$(document).ready(function(){

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


});

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

7 个答案: