manu_521 2022-05-03 10:19 采纳率: 66.7%
浏览 174
已结题

怎么改变< a > 标签 title 属性 鼠标悬停时候显示的效果

改变默认的< a > 标签 title 属性 效果变成这样

img


搜了一圈没搜出来。应该不是狠复杂吧。

  • 写回答

2条回答 默认 最新

  • 小蓝阿姨 2022-05-03 11:30
    关注

    有好几种实现方式
    最简单的自定义这个提示可以用一个标签加纯css去实现，不过效果会略显生涩
    记得点个采纳

    img

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="#" data-title="一个自定义提示">自定义文本提示</a>
</body>
<script>
</script>
<style>
  a{
    position: relative;
    color: #000;
    font-size: 14px;
    text-decoration: none;
  }

  a:hover::after{
    visibility: visible;
  }

  a::after{
    cursor: default;
    visibility: hidden;
    position: absolute;
    content: attr(data-title);
    background-color: #000;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    right: -120%;
  }
</style>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 5月12日
  • 已采纳回答 5月4日
  • 创建了问题 5月3日

悬赏问题

  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条