Question

一直致力于一个简单的项目，大部分都完成了问题，除了悬停和mouseleave事件之外，一切正常。不知道如何解决它。这是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：

.hover（）方法为mouseenter和mouseleave绑定处理程序事件。您可以使用它在行为期间简单地将行为应用于元素鼠标在元素中的时间。

所以你的.hover（）在mouseenter和mouseleave上都开了。更改为此，它应该工作：

$scope.recog = function() {
    var recognition = new SpeechRecognition();
    recognition.onresult = function(event) {
    $scope.filteredItems = $filter('filter')(datauser['data']['friends'], {nama : search}, false);

    var result = event.results[0][0].transcript;
        switch(result){
        case 'login':
        $scope.loginFn();
            break;
        case 'sign up':
        $location.path('/register');
            break;
        case 'register':
        $scope.registerFn();
            break;
        case 'cancel':
        $scope.cancelregisterFn();
            break;
        //for (var i = 1; i < $scope.filteredItems.length; i++){
        case 'chat with friend number ' + i:
        $scope.chatWith(friend.userid , friend.nama);
            break;
        //}
        case 'go to home':
        $location.path('/home');
            break;
        case 'go to add friend':
        $location.path('/addfriend');
            break;
        case 'go to friend request':
        $location.path('/friendrequest');
            break;
        case 'go to pending request':
        $location.path('/penddingrequest');
            break;
        case 'add':
        $scope.addfriends();
            break;
        case 'send':
        $scope.sendMessage();
            break;
        default:
        alert(result);
        alert(i);
            break;
    };
    $scope.$apply()
    };
    recognition.start();
  };

Answer 2

Atlast找到了问题并修复了它，解决方案是，我正在混合使用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一起跟踪所选元素。一旦做出必要的改变，就能达到预期的效果。

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

2 个答案: