0

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)

1
  • 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? Commented Aug 18, 2013 at 16:28

3 Answers 3

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;
}
Sign up to request clarification or add additional context in comments.

3 Comments

That depends on the OP's browser requirements (not mentioning any names…) caniuse
That's true, but I think it's safe to say, that browser support for IE7 is a more and more exotic requirement.
I agree - just thought I'd mention in case the OP has a valid reason for requesting a jQuery/Javascript solution.
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

Comments

1

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

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

  1. obtaining the value a of a attribute of the li
  2. replacing the text of link inside of the selected li with its contents
  3. 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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.