When you hover the mouse pointer, an object appears, while moving the mouse pointer, the object is deleted. I used the off function so that when pressed, the object was not deleted when the mouse was moved away. How to make the object retire when it is clicked back and work as before? https://jsfiddle.net/zb9q7e8b/2/

$('h2').next().hide(); $('h2').mouseover(function() { var $anse = $(this).next(); $anse.show(); }); $('h2').mouseout(function() { var $anse = $(this).next(); $anse.hide(); }); $('h2').click(function() { var $anse = $(this).next(); $(this).off('mouseout'); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>123</h2> <div>333</div> <h2>123</h2> <div>333</div> <h2>123</h2> <div>333</div>

    2 answers 2

    You can do it by adding-deleting a class offed , if there is no class, then add it and use off() , and if there is a class, delete it and add the mouseout() event:

     var titles = $('h2'); titles.next('div').hide(); titles.mouseover(function() { $(this).next('div').show(); }); titles.mouseout(function() { $(this).next('div').hide(); }); titles.click(function() { if (!$(this).hasClass('offed')) { $(this).off('mouseout').addClass('offed'); } else { $(this).mouseout(function() { $(this).next('div').hide(); }); $(this).removeClass('offed'); } }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>123</h2> <div>333</div> <h2>123</h2> <div>333</div> <h2>123</h2> <div>333</div>

      Another option on the classes:

       $('h2').on('mouseover mouseout click', function(e) { var $anse = $(this).next(); if (e.type == 'click') { $anse.toggleClass('clicked'); } else { if (!$anse.hasClass('clicked')) { $anse.toggleClass('hovered'); } } }); 
       div { display: none; } div.clicked, div.hovered { display: block; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>123</h2> <div>333</div> <h2>123</h2> <div>333</div> <h2>123</h2> <div>333</div>

      Update

      In cases where the user does not work, JS can hover on css .

       $('h2').on('click', function(e) { $(this).next().toggleClass('clicked'); }); 
       div { display: none; } h2:hover + div { display: block; } div.clicked { display: block; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>123</h2> <div>333</div> <h2>123</h2> <div>333</div> <h2>123</h2> <div>333</div>

      • But there is a possibility that the user will not have JS, and then they will not have the opportunity to see the block - PeGaS
      • @PeGaS, updated the answer! - Ihor Tkachuk
      • @PeGaS, now no one turns off JS, the probability of disabled JS tends to zero, and 99.5% of sites without JS will not work -
      • @Ihor Tkachuk, an interesting option, but poorly expandable, in reality, it is better to do a separate function for each event, so that when adding functionality you don’t have to rack your brains on how to link it with such logic - MasterAlex