jQuery：更改悬停在附近元素上的不透明度答案

【问题标题】：jQuery: change opacity on hover on nearby elementjQuery：更改悬停在附近元素上的不透明度
【发布时间】：2013-04-25 17:55:09
【问题描述】：

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

【问题讨论】：

您能给img 一个ID 并在事件处理程序中按ID 定位该元素吗？
你为什么不把hover事件绑定到ul标签？
您的标记无效。 <p> 不能是 <ul> 的孩子

标签： javascript jquery html hover opacity

【解决方案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">）

【讨论】：

我喜欢你简单、优雅的答案，@squint。 :) +1

【解决方案2】：

你可以这样做 -

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

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案4】：

这很简单，而且只有 css：

给元素一个类，

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

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

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

【讨论】：