用户选择图像并在悬停时更改背景颜色时，jQuery突出显示菜单项带有图像

Question

jQuery / Javascript新手。 我已经创建了一个菜单。 当用户将鼠标悬停在菜单中的某个项目上时，我希望更改背景颜色。 （易于使用CSS。）当用户实际选择一个项目时，我希望在项目名称的顶部出现一个箭头（例如带有背景图像的悬停效果），但是与悬停效果不同，我希望该箭头保持不变直到用户在菜单上选择另一个项目。 基本上，我正在尝试重新创建Zappos在这里所做的操作（ 请参阅鞋左侧的迷你浮动菜单 ）： http ://www.zappos.com/dr-scholls-jamie-black-dot?zfcTest=fcl% 3A0 。

我查看了许多有关突出显示所选菜单项的Stackoverflow问题和答案，但是，我所寻找的并不是Zappos浮动菜单的功能。

任何帮助将不胜感激！

阿南兹

Answer 1

看看我在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类来添加所需的箭头效果。 取决于是否要悬停（灰色类）或单击（蓝色类）上的箭头

Answer 2

您可以将css用于悬停效果。 假设导航是类别为“ nav”的无序列表，则代码将如下所示：

.nav li a:hover {
  background: #95ACC3;
}

至于点击效果，您将要使用jQuery将一个类添加到所单击的任何列表项中。 例如，下面的代码首先从所有列表项中删除“活动”类（这确保一次只有一个项目具有“活动”类），然后将“活动”类添加到单击的任何项目中。

$('.nav li').click(function(){
  $('.nav li').removeClass('active');
  $(this).addClass('active');
});

这是一个jsfiddle，上面有我正在谈论的工作示例： http : //jsfiddle.net/8CMxG/