Question

正如jsfiddle所见，当悬停在图像上时，图像的不透明度将降低，文本将被添加到其中。 http://jsfiddle.net/tangjeen/QPW27/12/

我在这里遇到问题。任何帮助将不胜感激。

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

我想将标题分为两行：第一行 - 泛，第二行 - Mee 我试过但是无法实现它。有办法吗？

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

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

1 个答案: