如何使用css在悬停时更改部分文本

Question

我希望我的网站显示：(855) TRY PETS当用户没有悬停在文字上但我希望文字显示：(855) 879 7387当用户将鼠标悬停在文字上时。< / p>

目前我有：

<li><a href="#"><i class="icon-phone-sign"></i>(855) TRY PETS</a></li>

是否有一种简单的方法可以使用css进行此更改？

Answer 1

仅CSS方法：

JSFiddle

HTML：

<li><a href="#"></a></li>

CSS：

li a:before {
  content:"(855) TRY PETS"
}

li a:hover:before {
  content:"(855) 879 7387"
}