纯CSS实现鼠标悬停提醒的方法(CSS小白第三期)

作者 : 开心源码 本文共1015个字,预计阅读时间需要3分钟 发布时间: 2022-05-12 共31人阅读

鼠标悬停提醒是指当鼠标悬停在某一元素上时浏览器弹出的黄色小文本框,一般开发者大多会结合Javascript创立各式各样的自己设置提醒,其实通过CSS定位也可以实现,首先我们看一下效果图:

接下来我们详细详情它的实现方法:

纯CSS实现鼠标悬停提醒的方法(CSS小白第三期)

  1. 首先创立一个简单的带链接的HTML(根据自己的需要),在链接显示的文本后面增加需要提醒的内容并置于span标签中(加粗部分)

    www.你懂的.com(未满18周岁请勿点击) is a Horror Movies Website.

  2. 接下来是关键部分,先将链接的position属性设置为relative,由于是的父级元素,这样接下来才可以让中的提醒内容根据中的链接文本进行绝对定位。中的提醒内容我们不希望它一开始就显示出来,所以要将它的display属性设置为none.

    a{position:relative;}

    a span{display:none;}

  3. 当鼠标悬停在链接上时我们希望显示出span中的提醒内容,这时就需要将span的display属性设置为block,为了让其出现在链接的右下方,需要将span的position属性设置为absolute,并设置肯定的距离(顶部1em,左边2em).

    a{position:relative;}

    a span{display:none;}

    a:hover span{display:block;

    position:absolute;top:1em;left:2em;}

  4. 前两步基已经完成了本次案例的主体,剩下的就是给span增加少量样式,让它看起来更像是提醒。可以增加少量内边距 边框和背景颜色等。

    a{position:relative;}

    a span{display:none;}

    a:hover span{display:block;

    position:absolute;top:1em;left:2em;

    width:160px;

    padding:0.2em 0.6em;

    border:1px solid #996633;

    background-color:#FFFF66;

    color:red;}

    PS:最后科普一下display:none与visible:hidden的区别

    display:none —不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,浅显来说就是看不见也摸不到。

    visible:hidden— 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,浅显来说就是看不见但摸得到。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 纯CSS实现鼠标悬停提醒的方法(CSS小白第三期)

发表回复