CODEWITHSUNDEEP
phpjqueryhrefmouseover
Ahsan
Ahsan

Reputation: 469

Change the name of HREF link

I have the following link

<a href="example.com" id="example1"> Go to example....</a>

Is it possible that when a body moves the cursor over "Go to example..." it changes to "Go to example One" , i am using php and jquery. Any help will be appreciated.

Upvotes: 0

Views: 4183

Answers (6)

Gumbo
Gumbo

Reputation: 655189

You can even do that with CSS only. You just need two elements in your link that you can address like:

<a href="example.com" id="example1"> Go to example <em>…</em> <span>One</span></a>

And the corresponding CSS behavior:

a span,
a:hover em {
    display: none;
}
a:hover span {
    display: inline;
}

Upvotes: 1

David Hellsing
David Hellsing

Reputation: 108490

The .hover() helper is useful here, to prevent annoying event bubbling:

var elem = $('#examle1'), orig = elem.text();
elem.hover(
    function() { $(this).text('Go to example One'); },
    function() { $(this).text(orig); }
);

Upvotes: 1

Ahsan
Ahsan

Reputation: 469

here is the PHP code 

<span
class="trackTitle"> <a href="<?php print  "play/".$link;?>" title="Listen or Download <?php echo $hoverActual ?>"  onmouseover="javascript:changeTo('<?php echo $hoverActual; ?>');"><?php echo $fileName; ?></a></span>

where the Function changeTo is used, i want to change $fileName; .

Upvotes: 0

anthonyv
anthonyv

Reputation: 2465

Try this out..

$('#example1').mouseover(function() {
    $(this).text('Go to example One');
});

Ya missed the # I was trying to get in quick ;)

Upvotes: 3

rahul
rahul

Reputation: 187030

$(function(){
    $("#example1").mouseover(function(){
        $(this).text('Go to example One');
    });
});

or you can use the hover function like

$(function(){
    $("#example1").hover(
      function () {
        $(this).text('Go to example one');
      }, 
      function () {
        $(this).text('Go to example....');
      }
    );
});

Upvotes: 3

Richard Szalay
Richard Szalay

Reputation: 84734

Shouldn't be too difficult using jQuery:

$('#example1')
    .mouseover(function(e) { $(this).text('Go to example One') })
    .mouseout(function(e) { $(this).text('Go to example...') });

Remove the second bind if you don't need it to go back to "..." when the user moves the mouse away.

Edit: Forgot about the mouseover helper method

Upvotes: 3

Related Questions