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

JQuery highlight menu item with an image when user selects it and change background color on hover

本文关键字：图像 菜单项 JQuery 颜色 显示 选择 用户 悬停 背景      更新时间：2023-09-26

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

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

任何帮助将不胜感激！

阿南兹

看看我在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 类添加带有箭头的背景来添加所需的箭头效果。 取决于您想要悬停（灰色类）还是单击（蓝色类）的箭头

您可以使用 css 实现悬停效果。假设导航是一个带有"nav"类的无序列表，代码将如下所示：

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

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

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

这是一个jsfiddle，其中包含我正在谈论的工作示例：http://jsfiddle.net/8CMxG/

相关文章：