Jquery показать и скрыть противоречивыми

Question

Я создал несколько Jquery в сочетании с CSS, чтобы сделать следующее

1) при наведении на картинку фации изображения и показывает розовый BG

2) при наведении указателя мыши показывает логотип

проблема заключается в том, что логотип отображается на всех, когда я дублирую классы

Может кто-нибудь помочь.

Пожалуйста, см Fiddle

$(".portfolio-home").hover(function() { 
    $(this).find(".show-logo").show(); 
}, function() { 
    $(this).find(".show-logo").hide(); 
}) 

Answer 1

Это просто li отсутствует на вашем селекторе. В противном случае он будет искать все элементы класса show-logo в пределах ul.

$(".portfolio-home li").hover(function() { 
    $(this).find(".show-logo").show(); 
}, function() { 
    $(this).find(".show-logo").hide(); 
}) 

Демо: http://jsfiddle.net/BC4eY/1435/

Answer 2

Вы можете использовать .on() метод для этого.

$(".portfolio-home").on('hover', 'li', function() { 
    $(this).find(".show-logo").show(); 
}, function() { 
    $(this).find(".show-logo").hide(); 
}) 

Answer 3

Здесь не используется какой-либо JQuery и просто CSS. Не переусердствуйте, это легче, чем вы думаете. Удивительный!

.portfolio-home ul li:hover{ 
background: grey; 
opacity: 0.5; 
} 
ul.portfolio-home li:hover img.show-logo{ 
position: absolute; 
display: block; 
} 

DEMO