The effect of transferring text without images
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:+6113007667437">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 ...
You do not even need to download jQuery or JS. CSS + HTML only. Fiddle
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:+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
You want something deeper ... That's how.
HTML
<a href="tel:+6113007667437"> <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; }
Try the following:
$('a').hover( function(){ $(this).text('1300 76 67437') }, function(){ $(this).text('1300 GO POOPIES') } });
How about http://jsfiddle.net/tzerb/S52bz/ <a class = "phone-text" href = "tel: +6113007667437"> </a>
here you have the solution proposed by yaponyal . it works unsigned >
.
.hiden { display:none; } a:hover .shown { display:none; } a:hover .hiden { display:inline; }