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