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。

DEMO： http://jsfiddle.net/DYWKU/ （我将p更改为<li class="p">）

Answer 2

你可以这样做 -

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

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);
});

Answer 4

这很简单，只有css：

为元素添加一个类

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

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

编辑：很慢：看到斜视的帖子比我的好多了

jQuery：在悬停在附近元素上时改变不透明度

4 个答案: