Jquery OnMouseOver эффектов конкретные DIV для подобных элементов

Question

В настоящее время у меня есть этот сценарий

<div class="box"> 
    <div class="fade-title">...content...</div> 
</div> 

<div class="box"> 
    <div class="fade-title">...content...</div> 
</div> 

Когда я двигаю мышь к одному из Div коробки, я только хочу, чтобы соответствующие fade-title исчезнуть, не все от них. Есть ли способ обойти это?

По-видимому $(this).$('.fade-title').hide() (я знаю, что это все равно будет закрыто ВСЕ из названия затухания) или $(this:last-child).hide() (так как fade-title всегда будет последним дочерним элементом div). .

Answer 1

Вы хотите

$(".fade-title", $(this)).hide() 

или

$(this).children(".fade-title").hide() 

$ (это) $ (...) не является действительным

Answer 2

использование find();

$(this).find('.fade-title').hide(); 

или children();

$(this).children('.fade-title').hide(); 

или с помощью контекстного

$('.fade-title', this).hide(); 

Answer 3

Проверить это одно, как это? http://jsfiddle.net/yeyene/6StSA/2/

Jquery

$('.box').mouseover(function() { 
    $(this).find('.fade-title').hide(); 
}).mouseout(function(){ 
    // if you dont want to show back again, comment below script 
    $(this).find('.fade-title').show(); 
}); 

Answer 4

Пожалуйста, посмотрите на http://jsfiddle.net/2dJAN/60/

Сценарий:

$('.box').mouseover(function(){ 
    $(this).find('.fade-title').hide(); 
}); 

HTML: 'плавному название'

<div class="box" style='height:100px; width:100px; background-color:red;'> 
    <div class="fade-title">...content... 1</div> 
</div> 

<div class="box" style='height:100px; width:100px; background-color:green;'> 
    <div class="fade-title">...content... 2</div> 
</div>