Question

我在这里想要实现的是图像工具提示。当我将鼠标悬停在链接上时，会显示相应的图像。

<html>
<head>
<style type='text/css'>
.tooltipcontent{
position:absolute;
display:none;
opacity:0.0;

}

</style>
<script type='text/javascript' src='jq.js'></script>
<script type='text/javascript'>
$(function(){

$('a').hover(

    function(){
         var currentimg= $(this).html();
         var offset =$('#link1').offset();
         $("div img[src='" + currentimg +".jpg']").css('top', offset.top).css('left', offset.left).css('display','block');
         $("div img[src='" + currentimg +".jpg']").animate({opacity: 1.0}, 300);


    },
    function(){}


);
});



</script>


</head>
<body>
<div class='tooltipcontent' id='tooltip1'>
<img src='numone.jpg'></img>
<img src='numtwo.jpg'></img>
</div>

<div id='link1'><a href='numone' target='_blank' id='viewlarger'>numone</a></div>
<div id='link2'><a href='numtwo' target='_blank' id='viewlarger'>numtwo</a></div>

 <input type='text' value='a'></input>
<div id='forimage'></div>
</body>
</html>

Answer 1

问题在于即使您显示<img>，您的样式仍然会隐藏父级：

.tooltipcontent {
  position:absolute;
  display:none;
  opacity:0.0;
}

我想你想要这个：

.tooltipcontent img {
  position:absolute;
  display:none;
  opacity:0.0;
}

还有一些其他问题需要解决，例如<img>和<input>标记是自动关闭的，而mouseleave处理程序（.hover()的第二个函数）需要一些补充。这样的事情更像是你可能会追求的：

$(function(){
  $('a').hover(function(){
     var currentimg= $(this).html();
     $("div img[src='" + currentimg +".jpg']").css($(this).offset()).fadeIn(300);
  }, function(){        
     var currentimg= $(this).html();
     $("div img[src='" + currentimg +".jpg']").css($(this).offset()).fadeOut(300);
  });
});

...并从CSS中删除opacity: 0.0;。 You can test it out here

jquery图像工具提示

1 个答案: