当我将鼠标悬停在图像或 <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">
)
关于javascript - jQuery:在悬停在附近的元素上时更改不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16323157/