There are three blocks, each of which should be highlighted, when you hover the mouse. Block number 1 is highlighted by default. When you hover on blocks 2 and 3, the selection should be removed from block 1 and connected to the selected block.

https://codepen.io/magnu/pen/KQMwMZ

I do not understand how to achieve this with jquery.

$('.block').hover(function () { if ($('.block').not('.active')) { $(this).toggleClass('active') } });

    3 answers 3

    It is possible so:

     $('.block').hover(function () { $(this).addClass('active').siblings('.block').removeClass('active'); });

      Try this:

       $('.block').hover(function () { $('.active').removeClass('active'); $(this).addClass('active'); });
      • Thank you, it works! - Irina Ezhova

      Option, with returning the active class to the second element, if the mouse cursor is outside of the wrapper blocks_wrapper

       const blocks = $('.block').on('mouseenter', function() { blocks.not(this).removeClass('active'); $(this).addClass('active'); }); $('.blocks_wrapper').on('mouseleave', function() { blocks.eq(1).trigger('mouseenter'); });