将鼠标悬停在图像或< p>上时,需要更改图像的不透明度.它上面.这是html结构
<div id="article-menu">
<ul>
<p>Image</p>
<li><img src="..." /></li>
</ul>
</div>
jQuery的
$("#article-menu img, #article-menu p").hover(function() {
$(this).closest('img').css('opacity', 1);
}, function() {
$(this).closest('img').css('opacity', 0.7);
});
这是行不通的.仅当您将实际图像悬停在p元素上时,它才起作用.
解决方法:
仅CSS解决方案:
#article-menu li > img {
opacity: .7;
}
#article-menu p:hover + li > img,
#article-menu li > img:hover {
opacity: 1;
}
…尽管您的标记无效.您的p必须是li.
演示:http://jsfiddle.net/DYWKU/(我将p更改为< li class =“ p”>)