鼠标放到文字上弹出一幅图片的代码

最新推荐文章于 2021-11-29 14:53:55 发布

weixin_30737363

最新推荐文章于 2021-11-29 14:53:55 发布

阅读量264

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yechangzhong-826217795/p/5012565.html

版权

<html>
<body>
<style type="text/css">
<!--
.thumbnail{position:relative;z-index:0;}
.thumbnail:hover{background-color:transparent;z-index:50;}
.thumbnail span{position:absolute;background-color:#FFFFE0;left:-1000px;border:1px dashed gray;visibility:hidden;color:#000;text-decoration:none;padding:5px;}
.thumbnail span img{border-width:0;padding:2px;}
.thumbnail:hover span{visibility:visible;top:10px;left:280px;}
p{margin-top:200px}
-->
</style>
<a class="thumbnail" href="#">
文字<br>
<span><img src="  ">
</span></a>
</body>
</html>

<script>
function senfe(){
    var l=event.clientX + document.body.scrollLeft;
    var t=event.clientY + document.body.scrollTop;
    document.getElementById("kkk").style.left=l + "px";
    document.getElementById("kkk").style.top=t + "px";
    document.getElementById("kkk").style.display="block";
}
function none(){
    document.getElementById("kkk").style.display="none";
}
</script>
<a href="javascript:;" onmouseover="senfe()" onmouseout="none()">查看</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<img src="http://gg.blueidea.com/2006/chinaok/208x32.gif" alt="" id="kkk" name="kkk" style="display: none;position: absolute;" />

转载于:https://www.cnblogs.com/yechangzhong-826217795/p/5012565.html

weixin_30737363

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标放到文字上弹出一幅图片的代码

<html><body><style type="text/css"><!--.thumbnail{position:relative;z-index:0;}.thumbnail:hover{background-color:transparent;z-index:50;}.thumbnail span{position:abs...
复制链接

扫一扫