Question

我有这段代码：

<div class="thumb_image_holder_orange">
    <img src="http://dummyimage.com/114x64/000/fff.png" />
</div>

图像位于div的中间，当我将鼠标悬停在图像上时，如何更改div的背景？

我只知道当我将鼠标悬停在div上时如何更改图像属性。

不想使用jQuery，但不要太在意。

谢谢！

Answer 1

你做不到。 CSS无法选择“父元素”：

http://snook.ca/archives/html_and_css/css-parent-selectors

宁愿不使用jQuery，但是不要太在意。

使用：http://jsfiddle.net/KHc6X/

$('.thumb_image_holder_orange > img').hover(function(){
    $(this).parent().toggleClass('hover');
})

Answer 2

CSS选择器无法提升，因此您需要使用JavaScript。

你标记了它jquery所以这是一个jQuery答案。

$('.thumb_image_holder_orange img').mouseover(function() {
    $(this).parent().css('backgroundImage', 'url(/whatever/you/want.png)');
});

Answer 3

解决方案：解决方案是使用绝对定位。请参阅下面的代码段。添加“orangeImg”ID会让生活变得更轻松！

创建具有相对定位的持有者div。在这个div里面你的“orangeImg”和“orangeBG”div。两者都有绝对定位。 orangeBG div还需要赋予width和height属性，因为它不包含任何元素。使用z-index属性，您将对div进行分层，顶部为Img div。

将.target类添加到orangeBG div，然后可以使用兄弟选择器“〜”在悬停时选择orangeImg div的任何兄弟。这里唯一的兄弟是orangeBG div。因此，只有当图像悬停时，背景才会改变！ JSfiddle here

祝你好运，

艾伦

#holder {position: relative; width: 200px; height:100px;}
#orangeImg {position:absolute; top:10px; right:10px; z-index:9999;}
#orangeBG {position:absolute; top:0px; right:0px; z-index:1; background-color:#353;width: 200px; height:100px;}
#orangeImg:hover ~ .target {background-color:#621;}

<div id="holder">
  <div id="orangeImg" class="thumb_image_holder_orange">
    <img src="http://dummyimage.com/114x64/000/fff.png" />
  </div>
  <div id="orangeBG" class="target">
  </div>
  
</div><!-- end holder -->

Answer 4

你不能在CSS中这样做。

标准JavaScript，而不是JQuery呢？

<div class="thumb_image_holder_orange">
    <img src="http://dummyimage.com/114x64/000/fff.png" onmouseover="this.parentNode.style.backgroundColor = '#f00'" onmouseout="this.parentNode.style.backgroundColor = '#fff'" />
</div>

Answer 5

以下代码段应该可以胜任：

$('.thumb_image_holder_orange > img').hover(function() {
    $(this).parent().css('background-color', '#f00');
});

Answer 6

如果您可以在图片旁边添加虚拟元素，则可以使用this pure CSS2 trick来完成此操作，从而生成this example fiddle。

标记：

<div class="thumb_image_holder_orange">
    <div></div>
    <img src="http://dummyimage.com/114x64/000/fff.png" />
</div>

样式表：

.thumb_image_holder_orange {
  background: orange;
  position: relative;
}
.thumb_image_holder_orange:hover {
  background: red;
}
.thumb_image_holder_orange div:hover {
  background: orange;
}
.thumb_image_holder_orange img {
  position: absolute;
}

在悬停时更改父div的背景

6 个答案: