提供zblog模板_zblog主题_wordpress模板的下载和定制

纯css实现鼠标移上去出现图片鼠标移开隐藏的效果

天兴工作室 2016-01-03 教程 16009 1 评论


前几天根据一个客户需求写这个东西,需求大意很简单。一行字“关注微信公众号”,鼠标放到这行字上就出现一个微信二维码的图片,鼠标移开则二维码图片隐藏

这东西本来准备用js开搞的,最后实在是懒于是直接用css开搞。搞完了整理了下代码发出来,希望能帮助到有需要的人。

代码很简单,html代码是这样:

<div class="weixin"><a href="javascript:;">关注微信公众号</a><img src="https://www.txcstx.cn/gg/zfb.png" /></div>

css代码是这样:

.weixin{ display:block;text-align:center; position:relative;}
.weixin img{ display:none;}
.weixin:hover img{ position:absolute; left:50%; top:0; margin-left:-115px; padding-top:30px; display:block;}

这个效果是用的css里面的伪类“hover”实现的,优点是代码特别特别的简单,缺点是兼容性不太好(ie8以下)和不支持手机端(因为手机没有鼠标这个东西)

如对以上代码有什么疑问的欢迎在本页下评论区域留言,天兴工作室有时间会一一回复的。


没有找到解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线提问 在线客服

1 位网友评论:

  • 香港独立IP主机

    香港独立IP主机 5年前 (2016-01-04) 回复

    纯css实现鼠标移上去出现图片鼠标移开隐藏的效果,如果有演示效果就好了,这样或许更真实

取消回复欢迎 发表评论:

  • 请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合

社交账号登录

将本文分享给你的朋友们