如何通过鼠标在文本上添加效果

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

您需要确保要制作动画的元素为position: relative;或position: absolute;，否则更改right将不会产生任何影响。

Answer 2

尝试这个

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

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