沒有圖像的文本翻轉效果

Question

我的網站頂部有一個電話號碼鏈接，數量為1300 GO POOPIES。 （例如：P）

<h1 class="phone-text">
<a href="tel:+6113007667437">1300 GO POOPIES</a>
</h1>

所以基本上，當一個人將他們的鼠標放在1300 GO POOPIES上時，它會變為1300 46 7667437。

我不想使用圖像，因為我想保留點擊通話功能。

我嘗試用CSS做一些事情，但成功率很低。

.phone-text::after {
  content: "1300 GO POOPIES";
}

.phone-text:hover:after {
  content: "1300 76 67437";
}

不確定這是否超出了css的界限，需要java ...

Answer 1

你甚至不需要加載jQuery或JS。 僅限CSS + HTML。 小提琴

Answer 2

如果您有理由避免使用JavaScript，那么只要您願意添加一些額外的標記，就可以通過CSS實現。 您可以在<a>標記內放置兩個元素，一個使用數字編號，一個使用字母數字編號。 然后，您可以使用a:hover選擇器獨立隱藏/顯示它們。

HTML

<h1 class="phone-text">
  <a href="tel:+6113007667437">
    <span class="letters">1300 GO POOPIES</span>
    <span class="digits">1300 76 67437</span>
  </a>
</h1>​

CSS

.phone-text a .digits,
.phone-text a:hover .letters {
  display: none;
}

.phone-text a .letters,
.phone-text a:hover .digits {
  display: inline;
}

的jsfiddle

Answer 3

你想要更深入的東西......這就是。

HTML

<a href="tel:+6113007667437">
  <div id="hide">
    <h1>1300 76 67437</h1>
  </div>
  <div>
    <h1>1300 GO POOPIES</h1>
  </div>
</a>

而你的CSS

div{
 position:absolute;
 background:#ffffff;
}
div#hide:hover{
 display:none;
}

Answer 4

試試這個：

$('a').hover(
  function(){
    $(this).text('1300 76 67437')
  },
  function(){
    $(this).text('1300 GO POOPIES')
  }
});

Answer 5

怎么樣這個http://jsfiddle.net/tzerb/S52bz/ <a class =“phone-text”href =“tel：+6113007667437”> </ a>

Answer 6

在這里，您對yaponyal提出的解決方案有所不同 。 它沒有>符號。

.hiden {
display:none;
}
a:hover .shown {
display:none;
}
a:hover .hiden {
display:inline;
}