Есть несколько блоков:
<div class="cat-item">
<div class="cat-img">
<img src="img/category/16.png" alt="">
<a class="text-cat" href="">Заголовок который появляется</a> <!-- при наведении должен появиться, а тег <p> должен ичезнуть -->
</div>
<p class="tx-cat">Заголовок который исчезает</p>
При наведении на тег <a>
, заголовок <p>
должен пропадать. Я сделал, но пропадают все заголовки при наведении на один из тегов <a>
. Что не так?
$(".text-cat").mouseenter(function() {
$('p[class*="tx-cat"]').each(function() {
if ($(this).css('opacity') == 0) {
$(this).css({opacity: 1})
}
if ($(this).css('opacity') == 1) {
$(this).css({opacity: 0})
}
});
});
$(".text-cat").mouseleave(function() {
$('p[class*="tx-cat"]').each(function() {
if ($(this).css('opacity') == 1) {
$(this).css({opacity: 0})
}
if ($(this).css('opacity') == 0) {
$(this).css({opacity: 1})
}
});
});