Question

当有人将原始文本悬停在新文本中时，我试图替换文本。有没有办法我可以在没有CSS的纯HTML中做到这一点？无论如何，下面是我最近编写的代码：

HTML代码：

<a href="#" class="button">
    <span>Product Name</span>
</a>

CSS代码：

.buton:not(:hover):before {
content: "Old Text";
}
.btn_action_1 span:hover:before {
content: "New Text";
}

我想做同样但只使用HTML。可能吗？ Bz我有几个不同的元素，所以对我来说会容易得多。 THX

Answer 1

不，这是不可能的。如果您希望在不重新加载的情况下更新您的站点，则需要使用CSS（用于简单的可视化更改）或JavaScript（用于更复杂的一切）。

Answer 2

<!DOCTYPE html>
<html>
<head>
<style>
 a:hover { font-size:0;}

 a:hover:after {
 font-size: 18px;
 content: attr(data-hover);
 }

</style>
</head>
<body>
<a href="" data-hover="CLICK ME">HOVER </a>
</body>
</html>

这是我能做的最好的事情。什么都不知道只使用html来获得悬停效果，或者我还没有学到它。感谢。谢谢。

Answer 3

.btn_action_1:before {
  content: "";
}

.btn_action_1:hover:before {
  content: "View Details";
}

.btn_action_1:hover span {
  display: none;
}

<a href="#" class="btn_action_1">
  <span>Product Name</span>
  <i class="ico_arrow"></i>
</a>

这就是你想要的吗？

仅使用HTML悬停时将文本替换为另一个文本

3 个答案: