Как добавить эффект к тексту при наведении на него мышью

0

Мне нужно добавить эффект в текст при наведении мыши.

мой код js: -

var j = jQuery.noConflict();
j(document).ready(function() {
j('.related_box ul li').hover(function(event) {
j(this).stop().animate({ right: "-5px" }, {duration: 'slow',easing: 'easeOutElastic'});
}
,
function(){
j(this).stop().animate({ right: "-75px" }, {duration: 'slow',easing: 'easeOutElastic'});
});
});

Код HTML: -

<div class="related_box">
<ul class="related_list_ul">
<li class="related_list"><h3><a href="#"></a><span>«</span> About us</h3></li>
<li class="related_list"><h3><a href="#"></a><span>«</span> Call us</h3></li>
<li class="related_list"><h3><a href="#"></a><span>«</span> Contact us</h3></li>
</ul>
</div>

Как добавить эффект к тексту, когда над ним мышь.

  • 1
    В чем проблема, код работает просто отлично -> jsfiddle.net/VQja9
  • 0
    Вы не забыли включить jQuery и jQuery UI?
Показать ещё 1 комментарий
Теги:

4 ответа

0
Лучший ответ

Попробуй это

j('.related_box > ul >  li > a').hover(function(event) {
Поделиться
  • 0
    Добавьте еще несколько объяснений, пожалуйста.
1

Вы должны убедиться, что элемент, который вы хотите оживить, - position: relative; или position: absolute; , иначе изменение right не будет иметь никакого эффекта.

Поделиться
0 
li.related_list a:hover{ color: #xyz; }

вы можете сделать это с помощью CSS

Поделиться
0

Использовать mouseover() http://api.jquery.com/mouseover/

Пример: (тест здесь http://jsfiddle.net/y8GYq/)

var j = jQuery.noConflict();
j(document).ready(function() {

    j("li").mouseover(function(){
        j(this).animate({
        opacity: 0.25,
        left: "+=50",
        height: "toggle"
        }, 5000, function() {
        // Animation complete.
        }); // animate
   });
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню