html5自定义新标签属性

HTML5 自定义属性示例

最新推荐文章于 2025-10-16 17:35:48 发布

原创最新推荐文章于 2025-10-16 17:35:48 发布 · 978 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

3 篇文章

订阅专栏

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

>>>>>>>>>>>>>>>>>>>>>>>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; 行锁定