javascript - 当用户选择它并在悬停时更改背景颜色时，JQuery 突出显示带有图像的菜单项

Question

这里是 JQuery/Javascript 新手。我创建了一个菜单。当用户将鼠标悬停在菜单中的元素上时，我希望背景颜色发生变化。 (使用 CSS 很容易做到。)当用户实际选择一个元素时，我希望箭头出现在元素名称的顶部(就像带有背景图像的悬停效果)但是，与悬停效果不同，我希望箭头保持不变直到用户选择菜单上的另一个元素。基本上，我正在尝试重现 Zappos 在这里所做的事情(请参阅鞋子左侧的迷你 float 菜单):http://www.zappos.com/dr-scholls-jamie-black-dot?zfcTest=fcl%3A0 .

我看了很多关于突出显示所选菜单项的 Stackoverflow 问题和答案，但没有一个是我正在寻找的，而这正是 Zappos float 菜单的作用。

如有任何帮助，我们将不胜感激!

阿南子

Answer 1

看看我做了什么here in jsfiddle .

在 zappos 做类似的效果

$(document).ready(function() {

    $('ul li').hover(
        function() {
        if ( !$('div').hasClass('blue') ) {
            $(this).addClass('gray');
        }
        },
       function() {
           $(this).removeClass('gray');
       }
    );

    $('ul li').click( function() {
        $('ul li').removeClass('blue');
        $(this).addClass('blue');
    });
});

编辑:您可以通过向 css 类添加带箭头的背景来添加所需的箭头效果。取决于你是想让箭头悬停(灰色类)还是点击(蓝色类)