Добрый день, есть такая структура:
<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>
Нужно, чтобы при наведении на блок .gallery-port появлялась a.calc-for-me.
На данный момент есть это:
$('.gallery-port').mouseenter(function () {
$('.calc-for-me').fadeIn();
});
$('.gallery-port').mouseleave(function () {
$('.calc-for-me').fadeOut();
});
Но тогда, при наведении на один элемент, а.calc-for-me появляется во всех остальных, и это, в принципе, логично. Как сделать, чтобы calc-for-me появлялся именно в том блоке, на который наводишь? Спасибо!