登录

鼠标经过文字显示隐藏图片css样式

JavaScript maolai 424次浏览 0个评论 扫描二维码

鼠标经过文字显示隐藏图片css样式,js鼠标经过文字显示图片预览效果,css如何实现鼠标移至文本上显示文字或图片。jQuery鼠标经过文字显示二维码代码。

这是一个比较简单的鼠标悬停经过文本显示二维码图片js效果,鼠标离开隐藏图片,代码简洁,显示位置上下左右可自己调整,目前非常的流行,多用于网站微信、微博关注,二维码支付等。代码通过javascript来实现,文本也可以换成图标等,需要的朋友可参考下。

1、js鼠标经过文字显示图片代码参考一

<style type="text/css">
.lmlblog{
position:relative;
width:300px;
margin:auto;}
.lmlblog span{
position:absolute;
z-index:990;
top:20px;      /*上距离*/
left:-100px;  /*左距离*/
display:none;}
</style>
<div class="lmlblog">
<span id="tupian">这里可以放图片地址</span>
<a href="#" id="pic">关注</a>
</div>
<script language="javascript">
document.getElementById("pic").onmouseover = function(){
document.getElementById("tupian").style.display='block';
}
document.getElementById("pic").onmouseout = function(){
document.getElementById("tupian").style.display='none';
}
</script>

2、js鼠标经过文字显示图片代码参考二

<style type="text/css">
#shang{text-decoration:none;
font-size: 28px;
line-height: 38px;
position: relative;
display: block;
width: 38px;
height: 38px;
margin: 0 auto;
-webkit-user-select: none;
text-align: center;
vertical-align: middle;
color: #fff;
border: 1px solid #f1b60e;
border-radius: 50%;
background: #fccd60;}
#lmlblog{display:none;height:60px;position:absolute;left:230px;z-index:990;}
</style>
<a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()" id="shang">赏</a>
<div id="lmlblog">
<img src="http://www.lmlblog.com/wp-content/themes/lml/img/zfb.jpg" />
</div>
<script type="text/javascript">
function showImg(){
document.getElementById("lmlblog").style.display='block';
}
function hideImg(){
document.getElementById("lmlblog").style.display='none';
}
</script>

本文由maolai编辑整理发布,转载请注明鼠标经过文字显示隐藏图片css样式!如果本文对你有帮助,可打赏博主,鼓励博主继续写作!
喜欢 (1)
[maolai]
分享 (0)
maolai
关于作者:
无折腾,不生活。一个爱折腾,爱分享的90后,欢迎你认识我,我是MAOLAI。
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址