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属性中添加的spec HTML不会更改文档树。因此，根据您的情况，您无法格式化data-text中包含的部分文本。

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

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

1 个答案: