html5自定义新标签属性

张小竟

于 2017-12-15 15:03:01 发布

阅读量962

点赞数

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/zhanglu1236789/article/details/78813257

html5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个HTML5自定义属性的应用实例：通过data-*属性实现鼠标悬停时显示不同文本的效果。此方法利用了CSS伪元素`:after`及`content`属性，结合`data-hover-response-1`属性来实现内容的替换展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

>>>>>>>>>>>>>>>>>>>>>>>html5自定义新标签属性>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
鼠标放上“qqqqq"，内容立马变成了"wwwww"
--------------------------------------代码-------------------------------------------------
.data_custom_1 { display:inline-block;position: relative; }
.data_custom_1:hover { color: transparent; }
.data_custom_1:hover:after {
content: attr(data-hover-response-1);
color: black;
position: absolute;
left: 0;
}
<div class="data_custom_1" data-hover-response-1="wwwww">qqqqq</div>
------------------------------------------说明----------------------------------------------
display:inline-block; 行锁定