如何消除鼠标悬停不必要的影响

Question

我有以下菜单 - 请在下面找到代码片段 - 并想知道是否有可能在链接（左侧区域）上删除鼠标上不需要的抖动效果。通过 jiggling ，我的意思并不是指向正确的效果。这是一个定义明确的事情。只是尝试在链接的最开始缓慢移动鼠标，你会看到不想要的效果。有什么想法吗？

/* jQuery Storage API Plugin 1.7.4 https://github.com/julien-maurel/jQuery-Storage-API */
!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):e("object"==typeof exports?require("jquery"):jQuery)}(function(e){function t(t){var r,i,n,o=arguments.length,s=window[t],a=arguments,u=a[1];if(2>o)throw Error("Minimum 2 arguments must be given");if(e.isArray(u)){i={};for(var f in u){r=u[f];try{i[r]=JSON.parse(s.getItem(r))}catch(c){i[r]=s.getItem(r)}}return i}if(2!=o){try{i=JSON.parse(s.getItem(u))}catch(c){throw new ReferenceError(u+" is not defined in this storage")}for(var f=2;o-1>f;f++)if(i=i[a[f]],void 0===i)throw new ReferenceError([].slice.call(a,1,f+1).join(".")+" is not defined in this storage");if(e.isArray(a[f])){n=i,i={};for(var m in a[f])i[a[f][m]]=n[a[f][m]];return i}return i[a[f]]}try{return JSON.parse(s.getItem(u))}catch(c){return s.getItem(u)}}function r(t){var r,i,n=arguments.length,o=window[t],s=arguments,a=s[1],u=s[2],f={};if(2>n||!e.isPlainObject(a)&&3>n)throw Error("Minimum 3 arguments must be given or second parameter must be an object");if(e.isPlainObject(a)){for(var c in a)r=a[c],e.isPlainObject(r)?o.setItem(c,JSON.stringify(r)):o.setItem(c,r);return a}if(3==n)return"object"==typeof u?o.setItem(a,JSON.stringify(u)):o.setItem(a,u),u;try{i=o.getItem(a),null!=i&&(f=JSON.parse(i))}catch(m){}i=f;for(var c=2;n-2>c;c++)r=s[c],i[r]&&e.isPlainObject(i[r])||(i[r]={}),i=i[r];return i[s[c]]=s[c+1],o.setItem(a,JSON.stringify(f)),f}function i(t){var r,i,n=arguments.length,o=window[t],s=arguments,a=s[1];if(2>n)throw Error("Minimum 2 arguments must be given");if(e.isArray(a)){for(var u in a)o.removeItem(a[u]);return!0}if(2==n)return o.removeItem(a),!0;try{r=i=JSON.parse(o.getItem(a))}catch(f){throw new ReferenceError(a+" is not defined in this storage")}for(var u=2;n-1>u;u++)if(i=i[s[u]],void 0===i)throw new ReferenceError([].slice.call(s,1,u).join(".")+" is not defined in this storage");if(e.isArray(s[u]))for(var c in s[u])delete i[s[u][c]];else delete i[s[u]];return o.setItem(a,JSON.stringify(r)),!0}function n(t,r){var n=a(t);for(var o in n)i(t,n[o]);if(r)for(var o in e.namespaceStorages)u(o)}function o(r){var i=arguments.length,n=arguments,s=(window[r],n[1]);if(1==i)return 0==a(r).length;if(e.isArray(s)){for(var u=0;u<s.length;u++)if(!o(r,s[u]))return!1;return!0}try{var f=t.apply(this,arguments);e.isArray(n[i-1])||(f={totest:f});for(var u in f)if(!(e.isPlainObject(f[u])&&e.isEmptyObject(f[u])||e.isArray(f[u])&&!f[u].length)&&f[u])return!1;return!0}catch(c){return!0}}function s(r){var i=arguments.length,n=arguments,o=(window[r],n[1]);if(2>i)throw Error("Minimum 2 arguments must be given");if(e.isArray(o)){for(var a=0;a<o.length;a++)if(!s(r,o[a]))return!1;return!0}try{var u=t.apply(this,arguments);e.isArray(n[i-1])||(u={totest:u});for(var a in u)if(void 0===u[a]||null===u[a])return!1;return!0}catch(f){return!1}}function a(r){var i=arguments.length,n=window[r],o=arguments,s=(o[1],[]),a={};if(a=i>1?t.apply(this,o):n,a._cookie)for(var u in e.cookie())""!=u&&s.push(u.replace(a._prefix,""));else for(var f in a)s.push(f);return s}function u(t){if(!t||"string"!=typeof t)throw Error("First parameter must be a string");g?(window.localStorage.getItem(t)||window.localStorage.setItem(t,"{}"),window.sessionStorage.getItem(t)||window.sessionStorage.setItem(t,"{}")):(window.localCookieStorage.getItem(t)||window.localCookieStorage.setItem(t,"{}"),window.sessionCookieStorage.getItem(t)||window.sessionCookieStorage.setItem(t,"{}"));var r={localStorage:e.extend({},e.localStorage,{_ns:t}),sessionStorage:e.extend({},e.sessionStorage,{_ns:t})};return e.cookie&&(window.cookieStorage.getItem(t)||window.cookieStorage.setItem(t,"{}"),r.cookieStorage=e.extend({},e.cookieStorage,{_ns:t})),e.namespaceStorages[t]=r,r}function f(e){var t="jsapi";try{return window[e]?(window[e].setItem(t,t),window[e].removeItem(t),!0):!1}catch(r){return!1}}var c="ls_",m="ss_",g=f("localStorage"),l={_type:"",_ns:"",_callMethod:function(e,t){var r=[this._type],t=Array.prototype.slice.call(t),i=t[0];return this._ns&&r.push(this._ns),"string"==typeof i&&-1!==i.indexOf(".")&&(t.shift(),[].unshift.apply(t,i.split("."))),[].push.apply(r,t),e.apply(this,r)},get:function(){return this._callMethod(t,arguments)},set:function(){var t=arguments.length,i=arguments,n=i[0];if(1>t||!e.isPlainObject(n)&&2>t)throw Error("Minimum 2 arguments must be given or first parameter must be an object");if(e.isPlainObject(n)&&this._ns){for(var o in n)r(this._type,this._ns,o,n[o]);return n}var s=this._callMethod(r,i);return this._ns?s[n.split(".")[0]]:s},remove:function(){if(arguments.length<1)throw Error("Minimum 1 argument must be given");return this._callMethod(i,arguments)},removeAll:function(e){return this._ns?(r(this._type,this._ns,{}),!0):n(this._type,e)},isEmpty:function(){return this._callMethod(o,arguments)},isSet:function(){if(arguments.length<1)throw Error("Minimum 1 argument must be given");return this._callMethod(s,arguments)},keys:function(){return this._callMethod(a,arguments)}};if(e.cookie){window.name||(window.name=Math.floor(1e8*Math.random()));var h={_cookie:!0,_prefix:"",_expires:null,_path:null,_domain:null,setItem:function(t,r){e.cookie(this._prefix+t,r,{expires:this._expires,path:this._path,domain:this._domain})},getItem:function(t){return e.cookie(this._prefix+t)},removeItem:function(t){return e.removeCookie(this._prefix+t)},clear:function(){for(var t in e.cookie())""!=t&&(!this._prefix&&-1===t.indexOf(c)&&-1===t.indexOf(m)||this._prefix&&0===t.indexOf(this._prefix))&&e.removeCookie(t)},setExpires:function(e){return this._expires=e,this},setPath:function(e){return this._path=e,this},setDomain:function(e){return this._domain=e,this},setConf:function(e){return e.path&&(this._path=e.path),e.domain&&(this._domain=e.domain),e.expires&&(this._expires=e.expires),this},setDefaultConf:function(){this._path=this._domain=this._expires=null}};g||(window.localCookieStorage=e.extend({},h,{_prefix:c,_expires:3650}),window.sessionCookieStorage=e.extend({},h,{_prefix:m+window.name+"_"})),window.cookieStorage=e.extend({},h),e.cookieStorage=e.extend({},l,{_type:"cookieStorage",setExpires:function(e){return window.cookieStorage.setExpires(e),this},setPath:function(e){return window.cookieStorage.setPath(e),this},setDomain:function(e){return window.cookieStorage.setDomain(e),this},setConf:function(e){return window.cookieStorage.setConf(e),this},setDefaultConf:function(){return window.cookieStorage.setDefaultConf(),this}})}e.initNamespaceStorage=function(e){return u(e)},g?(e.localStorage=e.extend({},l,{_type:"localStorage"}),e.sessionStorage=e.extend({},l,{_type:"sessionStorage"})):(e.localStorage=e.extend({},l,{_type:"localCookieStorage"}),e.sessionStorage=e.extend({},l,{_type:"sessionCookieStorage"})),e.namespaceStorages={},e.removeAllStorages=function(t){e.localStorage.removeAll(t),e.sessionStorage.removeAll(t),e.cookieStorage&&e.cookieStorage.removeAll(t),t||(e.namespaceStorages={})}});


var storage;
jQuery(function () {
	storage=jQuery.localStorage; 

    jQuery('nav:visible ul li').click(function (e) {
            //Set the aesthetics (similar to :hover)
        storage.set('link',jQuery('nav:visible ul li').index(jQuery(this)));
            jQuery('nav:visible ul li')
            .not(".clicked").removeClass('hovered')
            .filter(this).addClass("clicked hovered")
            .siblings().toggleClass("clicked hovered", false);
        }).hover(function () {
            jQuery(this).addClass("hovered")
        }, function () {
            jQuery(this).not(".clicked").removeClass("hovered")
        });

        var pageSize = 4,
            $links = jQuery(".pagedMenu li"),
            count = $links.length,
            numPages = Math.ceil(count / pageSize),
            curPage = 1;

        showPage(curPage);

        function showPage(whichPage) {
            var previousLinks = (whichPage - 1) * pageSize,
                nextLinks = (previousLinks + pageSize);
            $links.show();
            $links.slice(0, previousLinks).hide();
            $links.slice(nextLinks).hide();
            showPrevNext();
        }

        function showPrevNext() {
            if ((numPages > 0) && (curPage < numPages)) {
                jQuery("#nextPage").removeClass('hidden');
                jQuery("#msg").text("(" + curPage + " of " + numPages + ")");
            } else {
                jQuery("#nextPage").addClass('hidden');
            }
            if ((numPages > 0) && (curPage > 1)) {
                jQuery("#prevPage").removeClass('hidden');
                jQuery("#msg").text("(" + curPage + " of " + numPages + ")");
            } else {
                jQuery("#prevPage").addClass('hidden');
            }
        }

        jQuery("#nextPage").on("click", function () {
            showPage(++curPage);
            storage.set('page',curPage);
        });
        jQuery("#prevPage").on("click", function () {
            showPage(--curPage);
            storage.set('page',curPage);
        });
        if(storage.isSet('page')){ 
            var page= storage.get('page'); 
            curPage = page;
            showPage(page); 
        } 
        if(storage.isSet('link')){ 
            var link = storage.get('link')+1; 
            jQuery('nav:visible ul li:nth-child('+link+')').addClass("clicked hovered");
            var newUrl = jQuery('nav:visible ul li:nth-child('+link+') a').attr('href');
            if(newUrl!=location.href)location.href=newUrl;
        }
    });

    .hidden {
        display: none;
    }

    body {
        font: normal 1.0em Arial, sans-serif;


    }


    nav.pagedMenu {
        color: red;
        font-size: 2.0em;
        line-height: 1.0em;
        width: 8em;
        position: fixed; 
        top: 50px;
    }

    nav.pagedMenu ul {

        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav.pagedMenu ul li {
        height: 1.0em;
        padding: 0.15em;
        position: relative;
        border-top-right-radius: 0em;
        border-bottom-right-radius: 0em;
        -webkit-transition: 
        -webkit-transform 220ms, background-color 200ms, color 500ms;
        transition: transform 220ms, background-color 200ms, color 500ms;
    }


    nav.pagedMenu ul li.hovered {
        -webkit-transform: translateX(1.5em);
        transform: translateX(1.5em);
    }
    nav ul li:hover a {
        transition: color, 1200ms;
        color: red;
    }
    nav.pagedMenu ul li span {
        display:block;
        font-family: Arial;
        position: absolute;
        font-size:1em;
        line-height: 1.25em;
        height:1.0em;
        top:0; bottom:0;
        margin:auto;
        right: 0.01em;
        color: #F8F6FF;

    }

    a {
        color: gold;
        transition: color, 1200ms;
        text-decoration: none;
    }

    #pagination, #prevPage, #nextPage {
        font-size: 1.0em;
        color: gold;    
        line-height: 1.0em;
        padding-top: 250px;
        padding-left: 5px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav class="pagedMenu">
       <ul style="font-size: 28px;">
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 1</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 2</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 3</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 4</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 5</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 6</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 7</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 8</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 9</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 10</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 11</a></li>
        	<li class="" style="margin-bottom: 5px;"><a href="#">Link 12</a></li>
      </ul>
    </nav>

    <div id="pagination">
        <a href="#" id="prevPage" class="hidden">Previous</a>&nbsp;&nbsp;
        <a href="#" id="nextPage" class="hidden">Next</a>
        <span id="msg"></span>
    </div>

Jsfiddle here

Answer 1

我认为你根本不需要jQuery

替换：

nav.pagedMenu ul li.hovered {
        -webkit-transform: translateX(1.5em);
        transform: translateX(1.5em);
}

nav ul li:hover a {
        transition: color, 1200ms;
        color: red;
}

使用：

nav.pagedMenu ul li:hover a {
        transition: padding-left 500ms,color 1200ms;
        padding-left:1.5em;
        color: red;
    }

http://jsfiddle.net/dh7920rq/

您的实施问题在于：当您的<li>悬停时，它会向右移动，但您的鼠标仍处于原始位置，导致mouseout立即导致不良影响。

如果我们不移动<li>，而是增加padding-left的{​​{1}}，则鼠标仍在<a>内（或增加{ {1}}的{​​1}}

http://jsfiddle.net/dh7920rq/1/

<强>更新：

使用jQuery来保持OP请求的状态：

替换：

<li>

使用：

margin-left

这个想法是一样的：http://plnkr.co/edit/880ZtUiCwbRNGBNGuURU?p=preview

Answer 2

您可以通过为a元素提供填充来实现此效果。

Jsfiddle