添加链接以将鼠标悬停在文本更改按钮上？答案

【问题标题】：Add a link to a hover over text change button?添加链接以将鼠标悬停在文本更改按钮上？
【发布时间】：2020-02-18 22:47:10
【问题描述】：

我正在创建一个按钮，当您将鼠标悬停在它上面时会显示说明。但是我想在点击后转到一个链接，我如何将链接添加到按钮，因为我有一个悬停：before {content:"New Text"}

    button {width:20em}
    button {height:5em}
    button {
      box-shadow:inset 34px 0px 0px -15px #88bd40;
      background-color:#000000 ;
      border:1px solid #ffffff;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:15px;
      font-weight:bold;
      padding:9px 23px;
      text-decoration:none;
      text-shadow:0px -1px 0px #7a2a1d;

      }
     button:hover span {display:none}
     button:hover {
     background-color:#4c4c4c;}
     button:hover:before {content:"New Text"}

<html>
 <head>
 </head>
  <body>
   <button class="button"><span> Old text </span></button>
  </body>
</html>

【问题讨论】：

那么，您已经完成了悬停文本更改，但需要在点击时转到特定链接？
How to create an HTML button that acts like a link?的可能重复

标签： html button onhover

【解决方案1】：

将按钮更改为锚标记并向其添加 href，例如

<a href="https://www.google.com"><span> Old text </span></a>

我已将您的代码修改为您想要的，您可以查看以下链接

代码链接：https://codepen.io/codergoldlie/pen/ZEEeYKW

【讨论】：

执行此操作后如何将文本居中到按钮？
将 a 标签包裹在 p 标签中并设置 p 标签 {text-align: center} 的样式，我已经更新了 codepen 链接中的代码，您可以查看

【解决方案2】：

我宁愿建议有一个按钮样式的链接。这样，您将获得悬停效果、内容更改和链接...

<a href="#your_link#" class="button">Old text</a>

【讨论】：

【解决方案3】：

您可以添加 href 或将点击事件附加到按钮。

【讨论】：