JQuery/CSS зависания во всем мире, а не на элемент

Question

Я использую это JQuery:

$(document).ready(function() {  
    $('.trow1 img, .description').hover(function(){  
     $('.description p').removeClass('description_content'); 
    },  
    function(){  
     $('.description p').addClass('description_content');  
    }); 
}); 

создать небольшой парить над верхней части баннера листинг с несколькими текстовыми ссылками.

В основном JQuery удаляет класс description_content, который делает display:none;

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

http://jsfiddle.net/omouqh37/2/

Answer 1

Попробуйте изменить

$('.description p').removeClass('description_content'); 

Для

$(this).parent().find('.description p').removeClass('description_content'); 

Вот это должно быть достаточно:

http://jsfiddle.net/tLp5409f/

Читайте эти:

http://api.jquery.com/parent/

http://api.jquery.com/find/

http://api.jquery.com/class-selector/

Важное понятие от линии класса селектора - Описание: Выбор все элементы с данным классом.

Еще одна вещь, которую нужно учитывать: для этого вам не нужен javascript, посмотрите на псевдоэлементы и используйте :: before и :: after, но имейте в виду, что это может иметь меньшую поддержку в jQuery, поэтому может не быть лучший вариант в зависимости от того, как кросс-платформенный вам это нужно, чтобы быть

Answer 2

Благодаря Джо Sager

$(document).ready(function() {  
    $('.trow1 img, .description').hover(function(){  
     $(this).parent().find('.description p').removeClass('description_content'); 
    },  
    function(){  
$(this).parent().find('.description p').addClass('description_content'); 

    }); 
});