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

Question

[mrJLi]

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

<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 подвергалась только картинка, а остальные элементы не менялись.

Comments

[Aleksei Podgaev]

А можно ещё стили добавить, как именно по углам разнесены элементы? Ну и картину желательно иметь, конечно где-то выложенную, для полной наглядности.
Я вот тут выложил этот вопрос для тестирования: http://jsfiddle.net/gTVun/

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

Живой пример.

Comments

[mrJLi]

во блин век живи век учись, а все равно дураком помрешь) спасибо большое

[Максим Борзов]

@mrJLi на здоровье, кстати, это можно сделать без JS с помощью CSS3, на мой взгляд это даже предпочтительнее

[mrJLi]

а в ie7 работать будет?

[Максим Борзов]

@mrJLi без полифилов нет, тогда лучше оставить JS-версию

[mrJLi]

ага я про это же :)

Answer 2

[samosad]

Просто уберите из селектора тег img:

$('.show').each(function() {
// ...

Пример

Comments

[mrJLi]

при наведении внутри на элементы функция не срабатывает

Answer 3

[Иван Беленков]

Хотелось бы увидеть живой пример, например на codepen.io или JSBin.com.

Comments

[mrJLi]

http://codepen.io/anon/pen/ydJcg

Answer 4

[Andrew Dabich]

Есть в jQuery функция hover, попробуй конкретно указать класс на котором он будет срабатывать, а внутри функций анимацию с конкретными классами которые будут затухать. А если нужен этот обработчик на несколько элементов, то можно задать один класс для них чтобы вызывался этот обработчик или перечислить.

$('.class').hover(function() {
    	/* Mouse over */
    }, function() {
    	/* Mouse out */
    });