Jquery mouseover仅影响类似元素的特定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()（因为淡入淡出标题将永远是盒子div的最后一个孩子）。

Answer 1

你想要

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

或

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

$（this）。$（...）无效

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>