0

Есть несколько блоков:

<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})
        }
    });
});

2 ответа 2

0

Чтобы получить элемент именно в этом блоке нужно искать его относительно этого блока: .find('.tx-cat')

Чтобы получить класс не нужен такой сложный селектор, достаточно точки и название класса: .tx-cat

Наконец, нужно получить блок, в котором была наведена ссылка: .closest('.cat-item')

Итого:

$(this).closest('.cat-item').find('.tx-cat').css({ opacity: 0 })

Рабочий пример.

$(".text-cat").hover(function() {
  $(this).closest('.cat-item').find('.tx-cat').css({ opacity: 0 })
  $(this).css({ opacity: 1 })
}, function() {
  $(this).closest('.cat-item').find('.tx-cat').css({ opacity: 1 })
  $(this).css({ opacity: 0 })
});
.text-cat{
opacity:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</div>

<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>
</div>

0

Почему это сделано на jquery, а не CSS?

.cat-item .text-cat, .cat-item:hover .tx-cat { display: none; }

.cat-item:hover .text-cat, .cat-item .tx-cat { display: block; }

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.