纯css实现自定义alt效果

怼烎@ 2022-08-12 16:11 124阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自定义alt</title>
    </head>
    <style>
    body{font-size:12px}
    .test{position:relative;color:#0000cc;text-decoration:none;font-size:12px;}
    .test:hover{background:none; text-decoration:underline;}
    .test span {display: none;}
    .test:hover span{display:block;position:absolute;top:20px;left:8px; text-decoration:none;}
    .test:hover span p{border:1px solid #ccc;background:#fff;color:#000;padding:5px;text-align:left;font-size:12px; white-space:nowrap; text-decoration:none;}
    </style>
    
    <body>
    <a class="test" href="#">链接一<span><p>自定义标签1</p></span></a>     
    <a class="test" href="#">链接二<span><p>自定义标签2</p></span></a>     
    <a class="test" href="#">链接三<span><p>自定义标签3</p></span></a>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，124人围观）

还没有评论，来说两句吧...

相关阅读

相关纯 CSS 实现打字机效果

纯 CSS 实现打字机效果先看效果预备知识在学习这个需要了解两个新的 CSS 知识ch 单位ch 是一个相对长度单位, 表示数字 0 的宽度.steps 函数这时 CSS...

ゞ浴缸里的玫瑰/ 2024年05月24日 04:08/ 0 赞/ 100 阅读

相关【前端】纯CSS实现探照灯效果

效果如下： ![4b51bad84f9c40179ceb571da516c153.gif][] -------------------- 代码实现： >

╰半橙微兮°/ 2023年09月27日 13:25/ 0 赞/ 138 阅读

相关纯css实现粒子效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家好久没有更新的CSS3演武场系列，半年前搁浅的一篇文章赋予新年新气象闪亮登场了，研究一下利用css（sass）

小灰灰/ 2022年08月27日 10:49/ 0 赞/ 589 阅读

相关纯CSS实现手风琴效果

今天来看一个使用hover触发的一个手风琴效果，鼠标hover时改变图像宽度，配合transition实现动画，效果如下图所示。大家也可以到我的codepen[在线编辑][Li

野性酷女/ 2022年08月25日 08:36/ 0 赞/ 365 阅读

相关纯css实现自定义alt效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

怼烎@/ 2022年08月12日 16:11/ 0 赞/ 125 阅读

相关纯 css 实现三角效果

之前写过一篇关于 border 如何实现一个三角形的方法，这一次，我们将在这个的基础上实现下面的效果： ![70][] 关于尺寸方面，自己看着来就行，无所谓的；

旧城等待，/ 2022年05月28日 07:25/ 0 赞/ 363 阅读

相关纯css实现翻书效果

前言最近研究了一下css3的3D效果，写了几个demo，写篇博客总结一下实现的经过。PS:如果对transform-origin/perspective/transfo

一时失言乱红尘/ 2021年09月29日 16:58/ 0 赞/ 534 阅读

相关纯 CSS3 实现波浪效果

1.使用linear-gradient来做小波浪线 ①原理: linear-gradient(45deg, red, transparent 45%) 是个渐变

水深无声/ 2021年09月14日 15:42/ 0 赞/ 1213 阅读

相关纯CSS实现波动水球效果

今天学习到了一个新的css特效，波动水球效果，也是非常的好看，而且触类旁通，手机充电，被子里水的特效也都可以制作。 ![在这里插入图片描述][202005091816141

曾经终败给现在/ 2021年07月26日 20:20/ 0 赞/ 703 阅读

相关纯css实现聚光灯效果

css还是蛮有意思的哦，效果啥的也不差，我给大家安利一个聚光灯效果，真的非常奈斯，效果如图：中间的圆圈是不断地移动的， ![20200505133652481.gi

柔情只为你懂/ 2021年07月26日 19:01/ 0 赞/ 545 阅读