Изменить текст на Hover с помощью JQuery

Question

Я пытаюсь изменить элемент навигации с 'ME' на <ME> на hover с помощью JQuery. Вот что я пытаюсь: JSBin example

Тем не менее, это постоянное скрытие моего исходного текста. Кто-нибудь имеет представление о том, что я делаю неправильно? (Я очень новичок в JQuery/JS в целом)

Answer 1

DEMO

Попробуйте это. Я редактировал код

$(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); 
    } 
); 
}); 

Надеется, что это помогает Спасибо

Answer 2

Classical случае no js required, вы можете использовать классы CSS псевдо, а именно:

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

Answer 3

Я согласен с @Nirazul, если вы можете, пойти для чистого раствора CSS.

Если вы не можете, просто помните, что вы:

1. получения значения а из атрибута Li
2. заменяющего текст ссылки внутри выбранного Li с его содержимым
3. задним ходом операции на handlerOut

Итак:

$(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')); 
    } 
); 
}); 

Обновлено example.