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

【问题标题】：Replace Text With Another Text Upon Hover Only Using HTML仅使用 HTML 悬停时将文本替换为另一个文本
【发布时间】：2016-08-21 21:04:40
【问题描述】：

当有人将鼠标悬停在原始文本上时，我正在尝试将文本替换为新文本。有没有办法我可以在没有 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 我有几个不同的元素，所以对我来说会容易得多。谢谢

【问题讨论】：

<a href="#" class="button"><span class="default">Old Text</span><span class="hover">New Text</span></a> 和 .button:not(:hover)>.hover,.button:hover>.default {display:none} 应该可以工作。
不可能用纯 HTML 实现。
如果您不想要 CSS 答案，为什么还要用 CSS 标记问题？如前所述，仅使用 HTML 是不可能的。使用 CSS，它可能可能取决于“新文本”的来源（如果它已经在页面中，那么它可能取决于页面和元素的结构）；否则 - 它是从服务器接收的，或者来自用户交互 - 如果没有 JavaScript，它可能是不可能的。 “我想只用 HTML 来做 [this] ... 所以这对我来说会容易得多。” - 你从哪里知道网页设计应该是“easy我>”？
你好@NiettheDarkAbsol 感谢先生解决我的问题。我做了你提供的一切，一切都很顺利。非常感谢
我的问题解决了@DavidThomas

标签： html css

【解决方案1】：

不，这是不可能的。如果您希望在不重新加载的情况下更新您的网站，您需要使用 CSS（用于简单的视觉更改）或 JavaScript（用于更复杂的所有内容）。

【讨论】：

【解决方案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 获得悬停效果一无所知，或者我可能还没有学习。谢谢。

【讨论】：

【解决方案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>

这是你想要的吗？

【讨论】：

请在回答前阅读问题。