Change text on Hover using JQuery

Question

I am trying to change a navigation element from 'ME' to <ME> on hover using JQuery. Here's what I'm trying: JSBin example

However, it's permanently hiding my original text. Does anyone have an idea as to what I'm doing wrong? (I'm super new to JQuery/ JS in general)

Can I ask exactly what it is you're trying to do with your list elements in that example? Just add a hover state to each one? — Joe Buckle
– Joe Buckle, Commented Aug 18, 2013 at 16:28

nirazul · Accepted Answer · 2013-08-18 16:21:04Z

5

Classical case of no js required, you could use CSS pseudo classes, specifically:

:hover
:before
:after

Example

li a:before {
    content: "<";
    display: none;
}

li a:after {
    content: ">";
    display: none;
}

li a:hover:before {
    display: inline;
}

li a:hover:after {
    display: inline;
}

answered Aug 18, 2013 at 16:21

nirazul

3,9654 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dc5 Over a year ago

That depends on the OP's browser requirements (not mentioning any names…) caniuse

nirazul Over a year ago

That's true, but I think it's safe to say, that browser support for IE7 is a more and more exotic requirement.

dc5 Over a year ago

I agree - just thought I'd mention in case the OP has a valid reason for requesting a jQuery/Javascript solution.

SarathSprakash · Accepted Answer · 2013-08-18 16:27:37Z

3

DEMO

Try this. I have edited your code

$( function() {
  var text;
  $("#topnav li ").hover(
    function () {
      text=$(this).find("a").text();
     $(this).find("a").text($(this).attr('full'));
    },
    function () {
       $(this).find("a").text(text);
    }
  );
});

Hope this helps Thank you

answered Aug 18, 2013 at 16:27

SarathSprakash

4,6142 gold badges21 silver badges35 bronze badges

Comments

Anthony Accioly · Accepted Answer · 2013-08-18 16:34:11Z

1

I agree with @Nirazul, if you can, go for a pure css solution.

If you can't, just remember that you are:

obtaining the value a of a attribute of the li
replacing the text of link inside of the selected li with its contents
reversing the operation on handlerOut

So:

$( function() { 
  $("#topnav li").hover(
    function () {
      var myLi = $(this);
      myLi.attr('small', $('a', myLi).text());
      $('a', myLi).text(myLi.attr('full'));
    },
    function () {
       var myLi = $(this);
       $('a',myLi).text(myLi.attr('small'));
    }
  );
});

Updated example.

answered Aug 18, 2013 at 16:34

Anthony Accioly

22.6k9 gold badges76 silver badges125 bronze badges

Collectives™ on Stack Overflow

Change text on Hover using JQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related