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">）

Answer 2

这很简单，只有 css：

给元素一个类，

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

应该按照你想要的方式工作......没有测试这个，但这应该是没有jquery的方式

编辑：要慢：见斜视的帖子，它比我的好得多

Answer 3

你可以这样做 -

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

Answer 4

您可以尝试使用索引

$("#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);
});