Good afternoon, there is such a structure:

<div class="gallery-port"> <figure> <img src="/img/portfolio/6x3.jpg" alt=""> <a href="#" class="calc-for-me btn-callback open-callback">Ссылка</a> </figure> </div> <div class="gallery-port"> <figure> <img src="/img/portfolio/6x3.jpg" alt=""> <a href="#" class="calc-for-me btn-callback open-callback">Ссылка</a> </figure> </div> <div class="gallery-port"> <figure> <img src="/img/portfolio/6x3.jpg" alt=""> <a href="#" class="calc-for-me btn-callback open-callback">Ссылка</a> </figure> </div>

It is necessary that when you hover over the .gallery-port block, a.calc-for-me appears.

At the moment there is this:

 $('.gallery-port').mouseenter(function () { $('.calc-for-me').fadeIn(); }); $('.gallery-port').mouseleave(function () { $('.calc-for-me').fadeOut(); });

But then, when you hover on one element, a.calc-for-me appears in all the others, and this, in principle, is logical. How to make calc-for-me appear exactly in the block that you direct? Thank!

  • Vova, because it can be done on css. Mandatory on js, also via jquery? - Mr. Black

1 answer 1

We are looking for this class, but in the context of the object on which the act of wrath is performed, i.e. through this

 $('.gallery-port').mouseenter(function () { $(this).find('.calc-for-me').fadeIn(); }); $('.gallery-port').mouseleave(function () { $(this).find('.calc-for-me').fadeOut(); }); 
 .calc-for-me { display:none; } img { width: 110px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gallery-port"> <figure> <img src="http://www.kotomania.com/data/474.jpg" alt=""> <a href="#" class="calc-for-me btn-callback open-callback">Ссылка</a> </figure> </div> <div class="gallery-port"> <figure> <img src="http://www.kotomania.com/data/474.jpg" alt=""> <a href="#" class="calc-for-me btn-callback open-callback">Ссылка</a> </figure> </div> <div class="gallery-port"> <figure> <img src="http://www.kotomania.com/data/474.jpg" alt=""> <a href="#" class="calc-for-me btn-callback open-callback">Ссылка</a> </figure> </div>

Instead of $(this).find('.calc-for-me') you can use $(".calc-for-me", this)

  • Thank you very much, it works !!! - Dem0n.Hunter
  • @ vovan5150 If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Alexey Shimansky