The effect of transferring text without images

Question

I have a phone number at the top of my website, the number is 1300 GO POOPIES. (e.g. goals: P)

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

So basically, when a person hovers over 1300 GO POOPIES, he changes to 1300 46 7667437.

I do not want to use the image, since I want to keep the call-to-call functionality.

I tried to do something with CSS, but with minimal success.

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

not sure if this goes beyond css and needs java ...

Answer 1

You do not even need to download jQuery or JS. CSS + HTML only. Fiddle

Answer 2

If there is a reason why you are avoiding JavaScript, then this can only be achieved with CSS if you want to add extra markup. You do this by putting two elements in the <a> tag, one with a numerical number, one with an alphanumeric number. Then you can hide / show them independently using a:hover selectors.

HTML

 <h1 class="phone-text"> <a href="tel:[phone]"> <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

You want something deeper ... That's how.

HTML

 <a href="tel:[phone]"> <div id="hide"> <h1>1300 76 67437</h1> </div> <div> <h1>1300 GO POOPIES</h1> </div> </a> 

And your css

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

Answer 4

Try the following:

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

Answer 5

How about http://jsfiddle.net/tzerb/S52bz/ <a class = "phone-text" href = "tel: [phone]"> </a>

Answer 6

here you have the solution proposed by yaponyal . it works unsigned > .

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