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元素上时，才会起作用。

- anonamas

---

你能给 img 加上一个 ID 并在事件处理程序中通过 ID 定位到该元素吗？ - Rick Viscomi

为什么不直接将hover事件绑定到ul标签上呢？ - Doan Cuong

您的标记无效。<p>不能是<ul>的子元素。 - user1106925

Answer 1

CSS纯解决方案：

#article-menu li > img {
    opacity: .7;
}

#article-menu p:hover + li > img, 
#article-menu li > img:hover {
    opacity: 1;
}

尽管您的标记无效。 您的

需要成为

。 演示：http://jsfiddle.net/DYWKU/（我将

更改为

）

- user1106925

---

我喜欢你简单、优雅的回答，@squint。:) +1 - Troy Alford

Answer 2

你可以这样做 -

$(".article-menu").hover(function(){
   $(this).find('img').css('opacity', 1);
}, function(){
   $(this).find('img').css('opacity', 0.7);
});

- SachinGutte

Answer 3

你可以尝试使用索引

$("#article-menu img, #article-menu p").hover(function(){
    var index = $(this).index();
    var indexUp -= index;
    var indexDown += index;
    $("#article-menu img:eq("+indexUp+")").css('opacity', 1);
    $("#article-menu img:eq("+indexDown+")").css('opacity', 1);
}, function(){
    var index = $(this).index();
    var indexUp -= index;
    var indexDown += index;
    $("#article-menu img:eq("+indexUp+")").css('opacity', 0.7);
    $("#article-menu img:eq("+indexDown+")").css('opacity', 0.7);
});

- user2068594

Answer 4

这很容易，只需要使用CSS：

给元素添加一个类名，

.image:hover{moz-opacity: 0,7;}

应该按照您想要的方式工作...我没有测试过，但这应该是没有使用jQuery的方法

编辑：太慢了：请参见squint的帖子-比我的好多了

- Top Questions