鼠标悬停时图片上的css / html格式文本

Question

我有一个有效的示例，但我想设置图像悬停时显示的文本格式。 这是代码：

 .ecommerce-categories [class^=col-] > a:before { content: attr(data-text); position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 50px 20px; color: #fff; word-wrap: break-word; overflow: hidden; background-color: rgba(0,0,0,0.4); opacity: 0; -webkit-transition: all .7s ease; transition: all .7s ease; } .ecommerce-categories [class^=col-] > a:hover:before { opacity: 1; } 

 <div class="col-lg-4 categories"> <a href="#" data-text="Day for rafting and outdoor activities" style="background: url('images/catagories/cat-rafting.jpg') no-repeat center center; background-size: cover;" > 

我希望能够使用html标签编辑“数据文本”属性中的文本。 我应该如何重构此代码，以便做到这一点？ （data-text =“漂流和户外活动日”）。

谢谢。

Answer 1

根据规范 ，在CSS content属性中添加的HTML不会更改文档树。 因此，根据您的情况，您无法格式化data-text包含的部分data-text 。

为此，您可以使用javascript。 互联网上有大量的javascript工具提示插件/库/代码示例。