javascript - jQuery:在悬停在附近的元素上时更改不透明度

Question

当我将鼠标悬停在图像或 <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 元素上时它才有效。

Answer 1

仅 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"> )