Question

我会假设有一种更好的方法可以做到这一点，但这就是我想要的。我有一个无序列表。当您将鼠标悬停在List元素上时，它会删除带有悬停的notHovered，所有其他notHovered元素都将应用于BlurImage类。我最终得到的只有一个LI增加了“BLURIMAGE”类。谢谢你的帮助。

jsfiddle http://jsfiddle.net/9HbNR/1/

jQuery代码

var flag = true;    
$(document).ready(function(){
        $('ul.hoverable li').each(function(){
            $(this).addClass('notHovered');
        });
        $('ul li').on("mouseover", function(){
            $(this).removeClass('notHovered').addClass('hovered');
            $(' ul li.notHovered').each(function(){
                if(flag == true) {
                    flag = false;
                    $(this).addClass('BlurImage');
                }
            });
        });
        $('ul li').on("mouseout", function(){
            $('.BlurImage').removeClass('BlurImage');
            $('.hovered').addClass('notHovered').removeClass('hovered');
            flag = true;
        });
    });

HTML CODE

<ul class="inline-ul full hoverable">
    <li>

</li>
    <li>

</li>
    <li>

</li>
</ul>

Answer 1

删除了修复它的每个

var flag = true;
$(document).ready(function(){
    $('section#tf-media .bottom ul.hoverable li').each(function(){
        $(this).addClass('notHovered');
    });
    $('section#tf-media .bottom ul li').on("mouseover", function(){
        $(this).removeClass('notHovered').addClass('hovered');
            if(flag == true) {
                flag = false;
                $('section#tf-media .bottom ul li.notHovered').addClass('BlurImage');
            }
    });
    $('section#tf-media .bottom ul li').on("mouseout", function(){
        $('.BlurImage').removeClass('BlurImage');
        $('.hovered').addClass('notHovered').removeClass('hovered');
        flag = true;
    });
});

Answer 2

为什么要使用JavaScript而不是纯粹的CSS？

ul li { /* basic styles */ }
ul:hover li { /* change styles to ul that is hovered */ }
ul:hover li:hover { /* change styles to li that is hovered */ }

JSFiddle

在鼠标悬停时，将类应用于非鼠标悬停的元素

2 个答案: