Как вызвать затухание элемента при наведении на другой элемент?

Есть такой вот квадрат с картинкой внутри которого отпозиционированны элементы по углам

<a class="item show" href="#">
<img class="image" width="180" height="180" alt="" src="img.jpg" >
<p class="title">TEST POST 1</p>
<p class="year">2013</p>
<p class="cat">category</p>
</a>


и есть код на jquery

$(document).ready(function(){

$('.show img').each(function(){
      $(this).animate({opacity:'0.0'},1);
      $(this).mouseover(function(){
          $(this).stop().animate({opacity:'1.0'},600);
      });
      $(this).mouseout(function(){
          $(this).stop().animate({opacity:'0.0'},300);
      });

});
});

В данном случае при наведении на картинку в этом квадрате она выполняет фукнцию, но при наведении на текст функция не вызывается.
Если привязать функцию к ссылке то исчезают остальные элементы.
Вопрос, как изменить код чтобы при наведении на любой из дочерних элементов под этой ссылкой и в этом квадрате, изменению opacity подвергалась только картинка, а остальные элементы не менялись.
  • Вопрос задан
  • 3816 просмотров
Решения вопроса 1
Код не сильно изменится, вот:

$(document).ready(function() {
    
    $('.show').each(function() {
        
        var image = $('.image', this);
        
        image.animate({opacity:'0.0'},1);
        
        $(this).mouseover(function(){
            image.stop().animate({opacity:'1.0'},600);
        });
        
        $(this).mouseout(function(){
            image.stop().animate({opacity:'0.0'},300);
        });
    
    });
    
});


Живой пример.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@samosad
Просто уберите из селектора тег img:
$('.show').each(function() {
// ...

Пример
Ответ написан
@IoannGrozny
Front-end разработчик
Хотелось бы увидеть живой пример, например на codepen.io или JSBin.com.
Ответ написан
dabich
@dabich
Web Developer
Есть в jQuery функция hover, попробуй конкретно указать класс на котором он будет срабатывать, а внутри функций анимацию с конкретными классами которые будут затухать. А если нужен этот обработчик на несколько элементов, то можно задать один класс для них чтобы вызывался этот обработчик или перечислить.

$('.class').hover(function() {
    	/* Mouse over */
    }, function() {
    	/* Mouse out */
    });
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
12 июл. 2020, в 07:00
1000 руб./за проект
12 июл. 2020, в 06:59
3000 руб./за проект
12 июл. 2020, в 02:02
3000 руб./за проект