jquery悬停在课堂上的第一张图片上答案

【问题标题】：jquery hover on first image in classjquery悬停在课堂上的第一张图片上
【发布时间】：2014-01-21 17:43:56
【问题描述】：

我想在悬停时切换 div 类的图像/文本。

<div class="fif">
  <img src="img/img1.jpg">
  <div id="pmask">
     some text or image 1
  </div>
</div>
<div class="fif">
  <img src="img/img2.jpg">
  <div id="pmask">
     some text or image 2
  </div>
</div>

因此，当我将鼠标悬停在“fif”上时，图像将替换为“pmask”的内容。我试过了：

$(".fif").hover(function(){
        // in
        // fadeout image                
        $( "this img:first-child" ).fadeOut("fast");
        // fade in pmask
        $( "this .pmask" ).fadeIn("fast");

  },function(){
    // out
        // fadeout pmask
        $( "this .pmask:first-child" ).fadeOut("fast");
        // fade in image         
        $( "this img" ).fadeIn("fast");     

});

但这不起作用。

【问题讨论】：

还有关于第一个孩子。您需要重新访问 .pmask:first-child，因为 .pmask 不是 div 的第一个孩子。还有另一个关于 html 中的类的 id 问题

标签： jquery hover css-selectors

【解决方案1】：

试试这个（没有双关语）：

$(this).find("img:first-child").fadeOut('fast');

您不能将 this 指针作为选择器的一部分传递。

【讨论】：

【解决方案2】：

我认为是因为您绑定this 的方式，这是一个对象，只要我知道就不能绑定为字符串。为什么不试试呢：

$(".fif").hover(function(){
        // in
        // fadeout image                
        $(this).find("img").fadeOut("fast");
        // fade in pmask
        $( this ).find(".pMask").fadeIn("fast");

  },function(){
    // out
        // fadeout pmask
        $(this).find(".pMask").fadeOut("fast");
        // fade in image         
        $(this).find("img")fadeIn("fast");     

});

【讨论】：

【解决方案3】：

我想这就是你要找的东西：

$('.pmask').hide();
$(".fif").hover(function(){
        // in
        // fadeout image                
        $(this).children("img").fadeOut("fast");
        // fade in pmask
        $(this).children(".pmask").fadeIn("fast");

  },function(){
    // out
        // fadeout pmask
        $(this).children(".pmask").fadeOut("fast");
        // fade in image         
        $(this).children("img").fadeIn("fast");     

});

对于html，我将您的#pmask id 更改为.pmask 类。

<div class="fif">
  <img src="img/img1.jpg">
  <div class="pmask">
     some text or image 1
  </div>
</div>
<div class="fif">
  <img src="img/img2.jpg">
  <div class="pmask">
     some text or image 2
  </div>
</div>

这是一个更新的 jsfiddle：http://jsfiddle.net/4QF4C/37/

【讨论】：