Question

当我点击它时，我正在使用jQuery将元素移动到页面上的不同位置。该元素处于“悬停”状态，因为当我单击它时光标在它上面。当元素到达它的新位置时，它保持“悬停”状态。我该如何清除它？

Answer 1

这是我使用的（注意这是一个插件，所以应放在$(document).ready()语句之外）：

(function($) {
/*
    UnHover function
*/
    $.fn.unhover = function(ev) {
        this.each(function() {
            $(this).addClass('unhover').mouseout(function(){
                $(this).removeClass('unhover');
            });
        });
        return this;
    };
})(jQuery);

像这样附上：

$(document).ready(function(){
    $(a).click(function(){
        $(this).unhover();
        // other onclick code
        return false;
    });
});

CSS需要.unhover来使用元素自然状态的声明，如下所示：

a, a.unhover { color:#fff; }
a:hover {
    color: red;
    font-weight:bold;
}

Answer 2

“州”是什么意思？如果它只是元素的外观/位置，你应该使用'：hover'pseuedo css 类来设置它：

 a { color:#fff; }
 a:hover {
    color: red;
    font-style:bold;
 }

Answer 3

移动元素后尝试此操作：

$("#moved_element").mouseout();

或者可以使用addClass重新设置元素的类。

Answer 4

一种工作方法是克隆元素，将其从DOM中删除，然后重新添加。

$(this).clone(true).appendTo($(this).parent()).end().end().remove();

codepen：http://codepen.io/leifparker/pen/ByWxOa

Answer 5

你的unhover类需要在你的悬停状态之后，因为伪类会覆盖它。 unhover课程可以保持开启状态，当有人模糊焦点时，它会再次移除课程，给人的印象是在链接到其他地方时它总是处于关闭状态。

<script>
    $( document ).ready( function() {
      $('ul.social-links').on('click', 'a', function(){
        $(this).addClass('unhover');
    }).on('blur, mouseout','a', function(){
        $(this).removeClass('unhover');
    });
</script>

然后你的css需要按顺序排列：

a {
   color: #202020;
   opacity: 1;
   background: url('img/icons/social.png') no-repeat 0 0;
   transition: all 0.5s ease-in-out;
}
a:hover,
a:focus,
a:active {
   color: #ff0000;
   opacity: 0.5;
   background: url('img/icons/social.png') no-repeat -100px 0;
}
a.unhover {
   opacity: 1;
   background: url('img/icons/social.png') no-repeat 0 0;
   color: #202020;
}

“UnHover”使用jQuery移动元素

5 个答案: