JQ функция .hover()

Question

Мне нужно сделать выбор элемента при залипание на нем курсора на 3 сек. В приведенном примере получается выбрать элемент, но есть проблемы с элементами которые имеют общего предка, на них не обнуляется таймер, нужна сделать что бы таймер обнулялся.

<style>
  .elem {
    -webkit-transition: background-color .3s ease-out, .2s outline ease-in-out !important;
    -o-transition: background-color .3s ease-out, .2s outline ease-in-out !important;
    transition: background-color .3s ease-out, .2s outline ease-in-out !important;
    background-color: #bcd5eb !important;
    outline: 1px solid #1d66bb !important;
    color: #333 !important;
    cursor: pointer !important;
    z-index: 999999 !important;
  }

  .confirmed {
    background-color: #fc7169 !important;
    outline: 1px solid #dd345f !important;
    color: #333 !important;
    cursor: pointer !important;
    z-index: 999999 !important;
  }
</style>
<ul>
  <li>menu 1</li>
  <li>menu 2</li>
  <li>menu 3</li>
  <li>menu 4</li>
  <li>menu 5</li>
</ul>

<div>
  <span>flow 1</span><br>
  <span>flow 2</span><br>
  <span>flow 3</span><br>
  <span>flow 4</span><br>
  <span>flow 5</span><br>
</div>
<br>
<span>flow 1</span><br>
<span>flow 2</span><br>
<span>flow 3</span><br>
<span>flow 4</span><br>
<span>flow 5</span><br>
<script>
  $('*').hover(
    function(event) {
      event.stopImmediatePropagation();

      event.stopPropagation();

      $('.elem').removeClass('elem');

      $(this).addClass('elem');

      $.data(this, 'timer',
        setTimeout($.proxy(
          function() {
            $('.confirmed').removeClass('confirmed');

            $('.elem').addClass('confirmed')
          }, this
        ), 2500)
      );
    },

    function() {
      clearTimeout($.data(this, 'timer'));

      $('.elem').removeClass('elem')

    }
  );
</script>

ПРИМЕР https://jsfiddle.net/module/6k8zqpv4/3/

Answer 1

Дело в том что функция .hover() это обвертка для функций .mouseenter() и .mouseleave(). Для корректной работы нужно использовать функции .mouseover() и .mouseout().

$( document.body )
  .on( 'mouseover', '*', function( event ) {
    event.stopImmediatePropagation();

    $( '.elem' ).removeClass( 'elem' );

    $( this ).addClass( 'elem' );

    $.data( this, 'timer', setTimeout( $.proxy(
        function() {
             $( '.confirmed' ).removeClass( 'confirmed' );

             $( '.elem' ).addClass( 'confirmed' )                
        }, this 
    ), 2500 ) );
  })

  .on( 'mouseout', '*', function( event ) {
   clearTimeout( $.data( this, 'timer' ) );

   $( '.elem' ).removeClass( 'elem' )
  })

Answer 2

Думаю, проблема в том, что в js стоит селектор '*' и скрипт не обнуляет счётчик у дочерних элементов одного родителя, потому что сам родитель тоже подходит в этот селектор. Я бы добавил нужным элементам класс .select и в js заменил бы '*' на '.select'. Проверил код, таймер обнуляется в этом случае.

БЛОГ НА HUSL

JQ функция .hover()

Ответы (2 шт):