jquery - 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()（因为淡入淡出标题将始终是框 div 的最后一个孩子）有效。

Answer 1

你要

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

或者

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

$(this).$(...) 无效

Answer 2

请看一下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>

Answer 3

Check this one, like this? 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

使用find()；

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

或children()；

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

或使用上下文

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