使用JQuery悬停事件

时间:2010-06-11 18:34:56

标签: jquery hover

当用户将鼠标悬停在某个位置时,我正试图让“标记”移动到这里是我的代码:


$(document).ready(function(){
        $("#icondesc a").hover(function(){
            var cls = $(this).attr("class");
            $(this).siblings("p").hide();
            $(this).siblings("p."+ cls + "_qu").show();
            if(cls == "talk1"){
                marginleft = "415px";
            } else if (cls == "talk2"){
                marginleft = "535px";
            } else if (cls == "talk3"){
                marginleft = "655px";
            } else if (cls == "talk4"){
                marginleft = "777px";
            } else if (cls == "talk5"){
                marginleft = "893px";
            }

            $("#quote_marker").animate({"margin-left": marginleft});
        });
});

这就是我的icondescription div看起来像

`
<div id="icondesc">

                    <a class="talk5" href="services/solutions/index.php#energyanchor">
                    <img src="img/homeblue.png" alt="homeicon" class="icons">
                    </a><a class="talk4" href="services/solutions/index.php#fleetanchor">
                    <img src="img/truckblue.png" alt="fleeticon" class="icons">
                    </a><a class="talk3" href="services/solutions/index.php#medicalanchor">
                    <img src="img/medicalblue.png" alt="medicon" class="icons">
                    </a><a class="talk2" href="services/solutions/index.php#deviceanchor">
                    <img src="img/radioblue.png" class="icons" alt="radioicon">
                    </a><a class="talk1" href="services/solutions/index.php#transanchor">
                    <img src="img/busblue.png" class="icons" alt="transicon">
                    </a>

<p class="talk1_qu">Transportation</p>
<p class="talk2_qu" style="display:none;">Devices</p>
<p class="talk3_qu" style="display:none;">Medical</p>
<p class="talk4_qu" style="display:none;">Fleet Management</p>
<p class="talk5_qu" style="display:none;">Energy</p>

<span id="quote_marker"></span>
</div>
`

因此,quote_marker只有一个背景图像,并且在CSS中定义了margin-left IS。此外,“位置”设置为绝对值。

萤火虫告诉我marginleft没有定义。任何建议都会有所帮助!

1 个答案:

答案 0 :(得分:1)

在测试托管页面后,似乎使用marginLeft代替'margin-left'修复了问题。

您还使用jQuery 1.3.2而不是1.4.2。也许这个因素在?

无论如何,我不知道为什么这种形式的保证金在jsFiddle中不会对您的页面起作用,但这似乎是修复。