css+html鼠标悬停tips

最新推荐文章于 2024-06-11 17:59:59 发布

LitStronger

最新推荐文章于 2024-06-11 17:59:59 发布

阅读量1.6k

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/weixin_43641850/article/details/110436924

版权

本文介绍如何仅使用CSS和HTML实现鼠标悬停时的提示框功能，包括思路解析、步骤详解以及遇到的问题和解决方案。通过调整伪元素的位置、制作小三角形，并结合过渡效果提升用户体验。

摘要由CSDN通过智能技术生成

为了更好的阅读性，建议前往原文地址

某2020前端互助群的每周议题(三) Part 2

题目

实现一个鼠标悬停的功能，如图

在这里插入图片描述

要求：只使用CSS和HTML

可以贴出代码的实现地址例如https://codepen.io/ 上提交自己的代码

实现

我的实现

思路

1.初步实现

hover后出现文本提示，考虑使用伪元素:after来实现

:after这是css2的写法，css3是::after

<style>
    .wrap {
    
    }
    .wrap img {
    
        width: 1em;
        height: 1em;
    }
    .wrap:hover:after {
    
        content: attr(logo-tip);
        background: #222;
        color: white;

        border-radius: .2em;
        padding: .5em;
        width: 5em;
        opacity: .5;
    }
</style>

<div class="wrap" logo-tip="添加链接啦啦啦啦">
    <img src="https://hexo-1259001110.cos.ap-shanghai.myqcloud.com/link.png">
</div>