使用 CSS 伪类的attr() 展示 tooltip

这篇具有很好参考价值的文章主要介绍了使用 CSS 伪类的attr() 展示 tooltip。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图:
使用 CSS 伪类的attr() 展示 tooltip,# CSS学习,css,前端,javascript

使用场景: 使用React渲染后台返回的数据, 遍历以列表的形式展示, 可能简要字段内容需要鼠标放上去才显示的
可以借助DOM的自定义属性和CSS伪类的attr来实现

所有代码:文章来源地址https://www.toymoban.com/news/detail-712428.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      li {
        list-style: none;
        position: relative;
      }

      li::before {
        /* attr函数, 参数就是li标签身上的属性 */
        content: attr(tip);
        position: absolute;
        right: 0;
        opacity: 0;
        color: burlywood;
        transition: opacity 500ms;
      }

      li:hover::before {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="list">
      <li tip="list-item-1-tip">list-item-1</li>
      <li tip="list-item-2-tip">list-item-2</li>
      <li tip="list-item-3-tip">list-item-3</li>
    </div>
  </body>
</html>

到了这里,关于使用 CSS 伪类的attr() 展示 tooltip的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css伪类元素使用技巧 表达input父级聚焦css实现

    在这里插入图片描述

    2024年02月08日
    浏览(52)
  • HTML+CSS+ElementUI搭建个人博客静态页面展示(纯前端)

    登录页面 门户页面 博客页面 技术选取: HTML/CSS + VUE2 + ElementUI(Version - 2.15.14) 编程软件: VSCode 环境配置与搭建 安装指令 ELement 在 node 下载后,会发现 node_modules/element-ui 文件夹,直接复制到本地,之后按照文件路径引用并配置 [1]ElementUI - 2.15.14官网 [2] 获取图片网址 [3] 登录页面获

    2024年02月05日
    浏览(87)
  • css伪类和伪元素

    一、伪类说明   定义: 伪类⽤于向某些选择器添加特殊的效果   超链接(a标签)伪类:a标签我们在日常工作和学习中用的很多,我们只知道默认状态下为蓝色,但是a标签其实有四种状态。     1、未访问前为蓝色(如果a标签使用不是蓝色而是紫色,那么近期访问

    2024年02月08日
    浏览(47)
  • 5 CSS伪类选择器

    5 伪类选择器 anchor伪类:专用于控制链接的显示效果 More Actions:link a:link 选择所有未被访问的链接。 :visited a:visited 选择所有已被访问的链接。 :active a:active 选择活动链接。 :hover a:hover 选择鼠标指针位于其上的链接。 before after伪类 before/after伪类相当于在元素内部插入两个额外

    2024年02月12日
    浏览(56)
  • 工作中提高CSS的编写效率,可以多用这三个CSS伪类

    基本使用 :where()  CSS 伪类函数接受选择器列表作为它的参数,将会选择所有能被该选择器列表中任何一条规则选中的元素。 以下代码,文本都会变成 yellow 颜色 使用场景 其实 :where() 的功能本来就有,只不过有了它之后,实现起这些功能来就更加方便快捷~接下来就来讲讲它

    2024年02月10日
    浏览(48)
  • css3中有哪些伪类?

    CSS3中有很多伪类,以下是一些常见的伪类: :hover:用于选择鼠标悬停在元素上的状态。 :active:用于选择被用户激活(点击)的元素。 :focus:用于选择当前拥有焦点的元素(例如输入框)。 :first-child:用于选择父元素的第一个子元素。 :last-child:用于选择父元素的最后一个

    2024年04月22日
    浏览(42)
  • CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)

            前言:学习CSS就必须要学习选择器,在之前我们已经学习了基本选择器和复合选择器,但是还有几个选择器没有学习,这篇文章主要讲解伪类选择器。 ✨✨ ✨ 这里是秋刀鱼不做梦的BLOG ✨✨✨ 想要了解更多内容可以访问我的主页 秋刀鱼不做梦-CSDN博客 那么废话不多

    2024年04月17日
    浏览(50)
  • 【前端寻宝之路】学习和使用CSS的所有选择器

    🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​ 💫个人格言:“没有罗马,那就自己创造罗马~” 参考链接:CSS选择器参考手册 如果标签一样,但我只想修改其中一个标签的内容格式,此时我们就需要用到:类选择器. ⚠️我们可以通过类选

    2024年03月14日
    浏览(85)
  • css-伪类:not实现列表最后一项没有样式

            有了 :not 这个选择符,那么你将可以很好的处理类似这样的场景:假定有个列表,每个列表项都有一条底边线,但是最后一项不需要底边线。 示例: html:  css:  效果:  

    2024年02月11日
    浏览(55)
  • css,类选择器,id选择器,伪类选择器

    四个伪类选择器顺序不能换 id选择器class选择器标签选择器

    2024年02月13日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包