我有这段代码:
<div class="thumb_image_holder_orange">
<img src="http://dummyimage.com/114x64/000/fff.png" />
</div>
图片在div中间居中,我如何在悬停在图片上时更改div的背景?
我只知道当鼠标悬停在div上时如何更改图片属性。
最好不要使用jQuery,但也不介意。
谢谢!
我有这段代码:
<div class="thumb_image_holder_orange">
<img src="http://dummyimage.com/114x64/000/fff.png" />
</div>
图片在div中间居中,我如何在悬停在图片上时更改div的背景?
我只知道当鼠标悬停在div上时如何更改图片属性。
最好不要使用jQuery,但也不介意。
谢谢!
你做不到。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');
})
:hover
的功能。 - thirtydotCSS选择器无法上溯,因此您需要使用JavaScript。
您标记为jquery,因此这里是jQuery的答案。
$('.thumb_image_holder_orange img').mouseover(function() {
$(this).parent().css('backgroundImage', 'url(/whatever/you/want.png)');
});
创建一个相对定位的容器 div,在其中放置您的 "orangeImg" 和 "orangeBG" div。两者都将具有绝对位置。由于 orangeBG div 不包含任何元素,因此还需要为其指定宽度和高度属性。使用 z-index 属性可以叠加 div,使 Img div 位于顶部。
向 orangeBG div 添加 .target 类,然后使用兄弟选择器 "~" 来选择悬停在 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 -->
在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>
$('.thumb_image_holder_orange > img').hover(function() {
$(this).parent().css('background-color', '#f00');
});
<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;
}