Text Rollover Effect without Images

Question

I have a phone number link at the top of my website, the number is 1300 GO POOPIES. (for example purposes :P)

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

So basically, when a person puts their mouse over the 1300 GO POOPIES it changes to 1300 46 7667437.

I don't want to use an image however as I want to preserve the click-to-call functionality.

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

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

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

not sure if this is out of the boundaries of css, and needs java...

Answer 1

You don't even need to load jQuery or JS. CSS+HTML only. FIDDLE

Answer 2

If there is a reason for you avoiding JavaScript, then this can be achieved with just CSS if you're willing to add some extra markup. You do so by putting two elements inside the <a> tag, one with the numeric number, one with the alphanumeric number. Then you can hide/show them independently with 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

Answer 3

You want something a little more in depth... Here goes.

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

Answer 4

Try this:

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

Answer 5

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

Answer 6

here you have a variation to the solution proposed by yaponyal . it works without the > sign.

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

​