Question

我试图弄清楚如何淡化所有div，但正在徘徊的那个。到目前为止，这是我的代码，我只能让它褪去正在徘徊的那个，而不是所有的东西都没有被徘徊。

$(document).ready(function () {

    $('.fadeHover').hover(

    function () {
        $(this).stop().fadeTo('slow', 0.3);
    },

    function () {
        $(this).stop().fadeTo('slow', 1);
    });
});

<div class="fadeHover fadeDiv">
    <p>1</p>
</div>
<div class="fadeDiv fadeHover">
    <p>2</p>
</div>
<div class="fadeDiv fadeHover">
    <p>3</p>
</div>

Answer 1

$(document).ready(function () {
    $('.fadeDiv').hover(function(){
        $('.fadeDiv').fadeTo('slow', 0.3);
        $(this).fadeTo('slow', 1);
    });
});

Answer 2

检查此fiddle

您只需使用jquery not()选择器并this跟随

即可。

$('.fadeHover').hover(
   function () {
    $('.fadeHover').not(this).fadeTo('slow', 0.3);
   },
    function () {
    $('.fadeHover').fadeTo('slow', 1);
});

Answer 3

尝试一下：

$('.fadeHover').hover(

    function(){
        var current = $(this);
        $('.fadeHover').each(function(){
            if ($(this) !== current) $(this).stop().fadeTo('slow', 0.3);
        });
    },

    function(){
        var current = $(this);
        $('.fadeHover').each(function(){
            if ($(this) !== current) $(this).stop().fadeTo('slow', 1);
        });
    }

);

Answer 4

这是一个小提琴： http://jsfiddle.net/RjH4a/

$(document).ready(function () {

    $('.fadeHover').hover(

    function () {
        $('.fadeHover').stop().fadeTo('slow', 0.3);
        $(this).stop().fadeTo('slow', 1);
    },
    function () {
        $('.fadeHover').stop().fadeTo('slow', 1);
    });
});

Slash的解决方案也有效，效率更高但代码更多。

Answer 5

$(document).ready(function () {
    $(document.body)
        .on('mouseenter', '.fadeHover', function () {
            $('.fadeHover:not(:hover)').stop().fadeTo('slow', 0.3);
        })
        .on('mouseleave', '.fadeHover', function () {
            $('.fadeHover:not(:hover)').stop().fadeTo('slow', 1);
        });
});

这可以用纯CSS3完成：

.fade-container .fade-hover {
    opacity: 1;
    transition: opacity .5s linear;
}

.fade-container:hover .fade-hover {
    opacity: 0.3;
}

.fade-container:hover .fade-hover:hover {
    opacity: 1;
}

使用HTML：

<div class="fade-container">
    <div class="fade-hover">
        <p>1</p>
    </div>
    <div class="fade-hover">
        <p>2</p>
    </div>
    <div class="fade-hover">
        <p>3</p>
    </div>
</div>

在悬停div上淡出其他div

5 个答案: