Как использовать скрипт на все элементы с одинаковыми классами?

Question

[rizmaster]

Есть много блоков с одинаковыми классами, под ними заголовок. При наведении на блок, заголовок должен пропадать, помогите реализовать. То как я делаю или не работает или пропадают все заголовки при наведении на один из блоков.

Вот скрипт

<script>
         $(".text-cat").mouseenter(function() {
        if($('.text-cat ').css('opacity') == '1'){
       $('.tx-cat').css({opacity: 0})
    }
    });    
    </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>

Answer 1

[Егор Живагин]

Так а зачем скрипт-то? CSS

.cat-item:hover .text-cat{
opacity: 1;
}
 .cat-item:hover .tx-cat{
opacity: 0;
}

Comments

[rizmaster]

У меня тег на всю ширину и высоту блока .cat-item, ну и абсо...

[Егор Живагин]

rizmaster: у тебя комментарий сломался) И я ничего не понял почти

[rizmaster]

Егор Живагин: блин! писал 100500 лет )) в общем так не получается сделать так как у cat-item overflow-hidden, в нем тег a, который на всю его ширину и высоту, появляется при наведении, а заголовки с тегом p находятся за блоком cat-item.)

[Егор Живагин]

rizmaster: вот смотря на структуру кода из вопроса кажется, что всё можно. Если проблема ещё есть, увидеть бы код на codepen или jsfiddle было бы полезно)

[rizmaster]

Егор Живагин: это без скриптов https://jsfiddle.net/mtp4bkjh/1/

[Егор Живагин]

rizmaster: https://jsfiddle.net/7so3jbuk/ так должно работать?

[rizmaster]

Егор Живагин: ох елки-палки, не знаю почему у меня не работало, но спасибо большущее)))

[rizmaster]

Егор Живагин: понял в чем была моя ошибка, спасибо еще раз

[Егор Живагин]

rizmaster: да пожалуйста, бывает)