html - 鼠标悬停在图像上的 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”属性中的文本。我应该如何重构这段代码才能做到这一点？ (data-text="漂流和户外事件日")。

谢谢。

Answer 1

根据 spec在 CSS 内容属性中添加的 HTML 不会改变文档树。因此，在您的情况下，您无法格式化 data-text 中包含的部分文本。

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