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

Question

在jsfiddle可以看到，当悬停在图片上时，图片的不透明度会降低，文字会添加到图片上。 http://jsfiddle.net/tangjeen/QPW27/12/

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

当我将鼠标悬停在图片上时，图片看起来不稳定，不透明度会降低和增加，即使鼠标还没有离开图片。

我想将标题分成两行：第一行 - Pan，第二行 line-Mee。
我试过 \n 但无法实现。有办法吗？

<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();
  });

Answer 1

DEMO

试试这个

    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();
    });

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

When hover at an image, will reduce the opacity and add text

jquery

hover

opacity

line-breaks