没有图像的文本翻转效果

时间:2012-05-12 06:07:56

标签: javascript jquery css html5 css3

我的网站顶部有一个电话号码链接,数量为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 ...

6 个答案:

答案 0 :(得分:3)

您甚至不需要加载jQuery或JS。 仅限CSS + HTML。 FIDDLE

答案 1 :(得分:1)

如果您有理由避免使用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

答案 2 :(得分:1)

你想要一些更深入的东西......这就是。

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;
}

答案 3 :(得分:0)

试试这个:

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

答案 4 :(得分:0)

这个http://jsfiddle.net/tzerb/S52bz/怎么样     &LT; a class =“phone-text”href =“tel:+6113007667437”&gt;&lt; / a&gt;

答案 5 :(得分:0)

此处您对 yaponyal 提出的解决方案有所不同。它没有>符号。

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