Question

我已经尝试过但未能使其正常工作。基本上我试图得到它，以便当你将鼠标悬停在一个div上时，它应该将兄弟的不透明度更改为具有class="receiver"的0.5。

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

非常感谢任何帮助。提前谢谢。

Answer 1

你没有需要为此使用jQuery或JavaScript（尽管你可以 ¹），CSS非常有能力大多数浏览器实现相同的最终结果：

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

JS Fiddle demo

而且，即使使用'only'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解决方案，但现在已经发布了其他一些解决方案，我宁愿不再重复其他人的回答（只是感觉喜欢抄袭/复制）。

Answer 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/

Answer 3

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

http://jsfiddle.net/2K8B2/

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

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

悬停不透明度的jQuery

4 个答案: