javascript - 没有图像的文本翻转效果

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

这个http://jsfiddle.net/tzerb/S52bz/怎么样 <a class="phone-text" href="tel:+6113007667437" ></a>

Answer 5

尝试这个：

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

Answer 6

在这里，您对yaponyal提出的解决方案有所不同。它在没有>标志的情况下工作。

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

​​​