«Переместить» перемещенные элементы с помощью jQuery

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' psuedo css class:

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

Answer 3

Ваш класс 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;
}

Answer 4

Рабочий метод заключается в клонировании элемента, удалении его из DOM и повторном добавлении.

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

кодовая ручка: http://codepen.io/leifparker/pen/ByWxOa

Answer 5

Попробуйте после перемещения элемента:

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

Или, возможно, переустановить класс элемента с помощью addClass.