javascript - 显示新文本的过渡按钮

<分区>

当我将鼠标悬停在我的按钮上时，我想切换到新文本。

我已经设法转换出框的阴影和颜色，但似乎无法显示下一个。

到目前为止我的代码:

CSS:

#button2 {
    border: 1px solid black;
    border-radius: 7px;
    color: #fff;
    text-decoration: none;
    background-color: #fea710;
     box-shadow: 3px 3px 3px #888888;
         display: inline-block;
    text-transform: uppercase;
    font-size: 20px;
    padding: 12px 32px;
    font-family: arial;
    letter-spacing: .5px;
    font-weight: 400;
      transition-property: box-shadow, background-color, content;
    transition-duration: 0.5s;
    transition-timing-function: linear;
}

#button2:hover {
  box-shadow: 0 0 0 #888888;
    background-color: #fec35c; 
    content: "New text";
  }

HTML:

<a href="mylink" id="button2">start a free trial</a>

最佳答案

试试这个

<a href="mylink" id="button2"><span>start a free trial</span></a>

在 CSS 中

#button2:hover span {display:none}
#button2:hover:before {content: "New text"}

关于javascript - 显示新文本的过渡按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33412379/

上一篇：html - 图像最大宽度最大高度在 IE 11 中不起作用

下一篇：javascript - 如何影响 Canvas 的不同方向？

相关文章：

Jquery - .text() , .html() 不适用于 IE8

html - 将类应用于 td/span 中的文本？

javascript - 我的列之间的白色间距无法使用 css 覆盖它，也看不到它上面显示空间的 css

javascript - 如何在Retrofit中插入值？

javascript - 完全显示 Three.js sprite 和 PlaneGeometry 图像，无论其大小

javascript - ScriptResource.axd 运行时错误 var f=($telerik.isIE)?document.createElement(<iframe name ='"+this.get_id() +"' >")

html - Rails 4 sass 应用程序文件无法读取导入的 css 文件

.jspx 中的 Javascript

javascript - html + 内容溢出 iframe

html - CSS - 在太小的表格单元格内居中一个超大的 div