Jquery 将鼠标悬停在图像上时，将降低不透明度并添加文本_Jquery_Hover_Opacity_Line Breaks

Jquery 将鼠标悬停在图像上时，将降低不透明度并添加文本

jquery

Jquery 将鼠标悬停在图像上时，将降低不透明度并添加文本,jquery,hover,opacity,line-breaks,Jquery,Hover,Opacity,Line Breaks,正如在JSFIDLE上看到的，当鼠标悬停在图像上时，图像的不透明度将降低，文本将添加到图像中。我这里有问题。任何帮助都将不胜感激当我将鼠标悬停在图像上时，图像似乎不稳定，不透明度会减少或增加，即使鼠标没有离开图像我想把标题分成两行：第一行-潘，第二行-米。我尝试过，但没有成功。有办法吗 <body> <div id="img" class="img"> <img class="onclick" src="http://www

正如在JSFIDLE上看到的，当鼠标悬停在图像上时，图像的不透明度将降低，文本将添加到图像中。

我这里有问题。任何帮助都将不胜感激

当我将鼠标悬停在图像上时，图像似乎不稳定，不透明度会减少或增加，即使鼠标没有离开图像

我想把标题分成两行：第一行-潘，第二行-米。
我尝试过，但没有成功。有办法吗

<body>       
  <div id="img" class="img"> 
     <img  class="onclick" src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" 
     title="PanMee" alt="PanMee"   
     onclick="bigImage(1)"  style=" width:205px;height:160px; "/> 
  </div> 
</body>

var t;
$('div.img img').hover(function(){  
  var textTopPosition = $(this).position().top+17;  
  var textLeftPosition = $(this).position().left+6; 
  t = $('<div/>')
      .css({top:textTopPosition})
      .css({left:textLeftPosition})
      .text($(this).attr('title'))
      .appendTo($(this).parent());  
  $(this).fadeTo('fast',0.3);
  },function(){
     $(this).fadeTo('fast',1);
     $(t).remove();
  });


变量t；
$（'div.img img'）。悬停（函数（）{
var textTopPosition=$（this）.position（）.top+17；
var textLeftPosition=$（this）.position（）.left+6；
t=$（''）
.css（{top:textTopPosition}）
.css（{left:textLeftPosition}）
.text（$（this.attr（'title'））
.appendTo（$（this.parent（））；
美元（此）.fadeTo（'fast'，0.3）；
}，函数（）{
$（this.fadeTo（'fast'，1）；
$（t）.删除（）；
});

试试这个

    var t;
    $('div.img img').hover(function(){  
      var textTopPosition = $(this).position().top+17;  
      var textLeftPosition = $(this).position().left+6; 
      t = $('<div/>')
          .css({top:textTopPosition})
          .css({left:textLeftPosition})
          .text($(this).attr('title'))
      .appendTo($(this).parent());  
      $(this).fadeTo('fast',0.3);
    });  

    $('div.img').mouseleave(function(){
         $(this).find("img").fadeTo('fast',1);
         $(this).find("div").remove();
    });

vart；
$（'div.img img'）。悬停（函数（）{
var textTopPosition=$（this）.position（）.top+17；
var textLeftPosition=$（this）.position（）.left+6；
t=$（''）
.css（{top:textTopPosition}）
.css（{left:textLeftPosition}）
.text（$（this.attr（'title'））
.appendTo（$（this.parent（））；
美元（此）.fadeTo（'fast'，0.3）；
});  
$（'div.img'）.mouseleave（函数（）{
$（this.find（“img”）.fadeTo（'fast'，1）；
$（this.find（“div”）.remove（）；
});

谢谢。它起作用了。你知道怎么把标题分成两行吗：第一行-潘，第二行-米。我试过了，但没有成功。@Simarjeethingh Panghlia谢谢！这真的很有帮助。每当我在图像上停留较长时间时，它都会显示黄色文本，中间有
，如中所示。你知道有没有办法不显示黄色文本？