如何通過鼠標在文本上添加效果

Question

當鼠標懸停時，我需要爲文本添加效果。

我的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> 

如何添加效果通過鼠標在它的時候文本。

Answer 1

試試這個

j('.related_box > ul > li > a').hover(function(event) { 

Answer 2

您需要確保您要動畫的元素是position: relative;或position: absolute;，否則更改right將不會產生任何影響。

Answer 3

li.related_list a:hover{ color: #xyz; } 

您可以使用CSS

Answer 4

使用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 
    }); 
});