hover事件和click事件的冲突解决

最新推荐文章于 2024-08-22 12:16:08 发布

原创最新推荐文章于 2024-08-22 12:16:08 发布 · 3.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#hover和click冲突 #点击事件

本文通过简单的HTML、CSS和JavaScript代码演示了如何为列表项在鼠标悬停时更改背景颜色，并在点击时固定选中状态及取消其他项的高亮显示。此功能常见于导航菜单等交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码 —–一个简单demo
样式部分

.active-false{
        background-color: yellow;
    }
    .active-true{
        background-color: yellow;

    }
html代码

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
</ul>

js代码

     $('ul li').hover(function(){
            $(this).addClass('active-true')
        },function(){
            $(this).removeClass('active-true');
        })
        $('ul li').click(function() {
            $(this).removeClass('active-true').unbind('hover');
            $(this).siblings().removeClass('active-false')
            $(this).addClass('active-false')
     });