Question

我正在创建一个按钮，当您将鼠标悬停在该按钮上时会显示说明。但是我想单击链接后，由于悬停在{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>

Answer 1

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

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

我将您的代码修改为所需的内容，您可以看到以下链接

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

Answer 2

我宁愿建议链接的样式类似于按钮。这样，您将具有悬停效果，内容更改和链接...

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

Answer 3

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

将链接添加到悬停文本更改按钮上？

3 个答案: