悬停不透明度的jQuery答案

【问题标题】：jQuery on hover opacity悬停不透明度的jQuery
【发布时间】：2012-03-24 07:13:01
【问题描述】：

我已经尝试过但未能成功。基本上我想得到它，这样当你将鼠标悬停在一个 div 上时，它应该将兄弟姐妹的不透明度更改为 0.5，它具有 class="receiver"。

如果您看到此jsFiddle，则有 2 个带有 class="outerwrapper" 的 div，并且都包含 hover 和 receiver 类的 2 个 div。当您将鼠标悬停在类 hover 的 div 上时，receiver 的不透明度应设置为 0.5，但仅限于同一 div（外包装）内的那个。

任何帮助将不胜感激。提前致谢。

【问题讨论】：

标签： javascript jquery html hover

【解决方案1】：

你并不需要为此使用 jQuery 或 JavaScript（尽管你可以¹），CSS 在大多数浏览器达到相同的最终结果：

.hover:hover + .receiver {
    opacity: 0.5;
}

JS Fiddle demo.

此外，即使使用“仅”CSS，在现代/兼容的浏览器中，也可以使用淡入淡出转换（或者，严格来说，转换不透明度）：

.receiver {
    width: 50px;
    height: 50px;
    background-color: blue;
    opacity: 1;
    -webkit-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

.hover:hover + .receiver {
    opacity: 0.5;
    -webkit-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

JS Fiddle demo.

我也打算提供一个 JavaScript/jQuery 解决方案，但现在已经发布了其他几个解决方案，我不想自己重复其他人的答案（它只是感觉比如抄袭/抄袭）。

【讨论】：

哦，我只是按照您的评论添加了这些内容！ =) 不客气，我很高兴能帮上忙！ =D

【解决方案2】：

这样的事情可以做到：http://jsfiddle.net/UzxPJ/3/

$(function(){
    $(".hover").hover(
        function(){
            $(this).siblings(".receiver").css("opacity", 0.5);    
        },
        function(){
            $(this).siblings(".receiver").css("opacity", 1);  
        }        
    );            
});

参考文献

.siblings() - 获取元素的兄弟姐妹 - http://api.jquery.com/siblings/

.hover() - 捕捉 mouseover/mouseout 事件 - http://api.jquery.com/hover/

【讨论】：

很好的答案 +1，尽管我建议使用 ".fadeTo(0, 0.5); 而不是 .css()。编辑：哦，缓存 $(this)，并使用 .on(' hover', function) 而不是 .hover :)
@ninja 你不能在这里缓存$(this) - 它们是两个独立的回调。
@ninja 同意，有几种方法可以实现相同的目标。我认为这是最具描述性的。
如果您需要单独的“输入”和“输出”功能，@ninja 和 .on('hover', ...) 不起作用。
@alnitak，不是吗？我自己没试过，但 .hover 只是指向 jquery 源中的 .on('hover'... 不是吗？

【解决方案3】：

$('.hover').hover(function() {
    $(this).next('.receiver').css('opacity', 0.5);
}, function() {
    $(this).next('.receiver').css('opacity', 1.0);
});

http://jsfiddle.net/2K8B2/

（如果.receiver 不一定是下一个元素，则使用.siblings 或.nextAll）

【讨论】：

【解决方案4】：

这行得通：

$(document).ready(function() {
    $('.hover').hover(function() {
        var $parent = $(this).parent('.outerwrapper');
        $parent.find('.receiver').css({ opacity : 0.5 });
    }, function() {
        var $parent = $(this).parent('.outerwrapper');
        $parent.find('.receiver').css({ opacity : 1 });
    });
});

【讨论】：

...但是不必要的复杂。在 DOM 中遍历兄弟节点非常有效 - 无需上升到父节点。
是的，这是错误的解决方案。我已经投票给 .siblings() 一个更好的解决方案。