我在这里想要实现的是图像工具提示。当我将鼠标悬停在链接上时，就会显示相应的图像。
<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>
最佳答案
问题是，即使您显示 <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);
});
});
...并删除 opacity: 0.0;来自CSS。 You can test it out here .
关于jquery 图像工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4533588/