Question

我创建了一个具有.hover效果的导航栏。但我希望我添加的效果可以保留或添加当我使用.click时我还想删除该效果当我点击另一个栏。抱歉令人困惑：）

我的代码就像这样

HTML：

<div id="menubar">
    <div class="menubutton">Home</div>
    <div class="menubutton">Dessert</div>
    <div class="menubutton">About Us</div>
</div>

的CSS：

#menubar {
    height: 30px;
    width: 100%;
    background-color: gray;
}

.menubutton {
    height: 30px;
    width: 60px;
    background-color: gray;
    display: inline-block;
    color: black;
    transition: background-color 0.5s ease;
}

.active {
    height: 30px;
    width: 60px;
    background-color: white;
    color: red;
}

jQuery的：

$('.menubutton').hover(function() {
    $(this).addClass('active');
},
function() {
    $(this).removeClass('active');
});

Answer 1

添加点击处理程序，

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

<强> Fiddle Demo

Answer 2

为点击事件创建新的课程activeClick，因为active课程会在悬停事件时删除： -

$(function(){
 $('.menubutton').click(function(){    
   $('.menubutton').removeClass('activeClick');
   $(this).addClass('activeClick');
  });
});

Demo

Answer 3

未经测试，只是在编辑器中写了这个：

$(document).on('ready', function() {
    $('.menubutton').on('click', function() {
        $('.menubutton').removeClass('active clicked');
        $(this).addClass('active clicked')
    }).on('mouseenter', function() {
        $('.menubutton.active').not('.clicked').removeClass('active');
        $(this).addClass('active')
    }).on('mouseleave', function() {
        $(this).not('.clicked').removeClass('active')
    });
});

Answer 4

试试这个：

$('.menubutton').click(function() {
    $('.menubutton').not(this).removeClass('active')
    $(this).toggleClass('active');
});

<强> Demo

保留单击菜单项的悬停效果

4 个答案: