悬停和鼠标悬停效果重复多次

Question

一直在做一个简单的项目，大部分完成的问题是除了悬停和鼠标离开事件之外一切正常。不知道如何解决它。这里是the link

或

HTML代码

<div id="container">
        <div class="heading">
            <h1>Twitch Streamers</h1>
        </div>
        <div class="heading slider">
            <div class="options all selected-tab">
                <div class="icon icon-all"></div>
                <span class="">All</span>
            </div>
            <div class="options active">
                <div class="icon icon-active"></div>
                <span class="hide">Online</span>
            </div>
            <div class="options offline">
                <div class="icon icon-offline"></div>
                <span class="hide">Offline</span>
            </div>
        </div>
    </div>

JS代码

$("document").ready(function(){
    $(".all, .active, .offline").on("click",selectOption);

    function selectOption(){
        $(".selected-tab span").addClass("hide");
        $(".selected-tab").removeClass("selected-tab");
        $(this).addClass("selected-tab");
        $(this).find("span").removeClass("hide");
        }
});

CSS代码

                    #container{
            width: 80%;
            background-color: #B17878;
            margin: 0px auto;
        }
        .heading{
            display: inline-block;
        }

        .slider{
            width: 90px;    
            float: right;
            font-size: 14px;
            margin-top : 4px;
        }

        .options{
            width: 20px;
            height: 14px;
            float: right;
            padding: 2px;
            padding-right: 0px;
            clear: both;

            padding-left: 7px;
            margin-top: 4px;

            background-color: #eee;
            color: rgb(123, 97, 57);
            cursor: pointer;

            transition: width 0.5s linear;
            -webkit-transition : width 0.5s linear;

        }

        .icon{
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
        }

        .icon-all{
            background-color: rgb(123, 97, 57);
        }

        .icon-active{
            background-color: rgba(191,206,145,1);
        }

        .icon-offline{
            background-color: rgb(126, 144, 187);
        }

        .hide{
            display: none;
        }

        .selected-tab{
            width: 80px;
        }

        .options span{
            float: right;
            margin-right: 5px;
        }

        .options:hover{
            width: 80px;
        }

当我快速地将鼠标悬停在 ALL、在线和离线上多次时，动画运行了我触发的 n 次，我需要一些帮助来解决这个问题，任何建议都会很棒！！

Answer 1

来自jQuery documentation：

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

所以你的 .hover() 在 mouseenter 和 mouseleave 上都触发了。对此进行更改，它应该可以工作：

        $(".all, .active, .offline").mouseenter(expand);
        $(".all, .active, .offline").mouseleave(shrink);

Answer 2

终于找到问题并解决了，解决方案是，我混合了 css 和 jquery，这是不必要的，在将两者分开时，达到了预期的结果

我所要做的就是添加溢出

CSS

  .options{
            width: 20px;
            height: 14px;
            float: right;
            padding: 2px;
            padding-right: 0px;
            clear: both;

            padding-left: 7px;
            margin-top: 4px;

            overflow: hidden;

            background-color: #eee;
            color: rgb(123, 97, 57);
            cursor: pointer;

            transition: width 0.5s linear;
            -webkit-transition : width 0.5s linear;

        }

JS

$(".all, .active, .offline").on("click",selectOption);
            function selectOption(){
                $(".selected-tab").removeClass("selected-tab");
                $(this).addClass("selected-tab");
            }

和 JS 来跟踪所选元素。一旦进行了必要的更改，就达到了预期的效果。

悬停和鼠标悬停效果重复多次

hover and mouseover effect repeat numerous times

jquery

jquery-hover

mouseleave