使用JQuery悬停事件

当用户将鼠标悬停在某个位置时，我试图移动一个“标记”，这是我的代码：

$(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}); }); }); $（文档）.ready（函数（）{ $（“#icondesc a”）.hover（函数（）{ var cls=$（this.attr（“类”）； $（this.this）（“p”）.hide（）； $（this）.兄弟姐妹（“p.”+cls+“_-qu”）.show（）； 如果（cls==“通话1”）{ marginleft=“415px”； }否则如果（cls==“talk2”）{ marginleft=“535px”； }否则如果（cls==“talk3”）{ marginleft=“655px”； }否则如果（cls==“通话4”）{ marginleft=“777px”； }否则如果（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_标记只有一个背景图像，左边的边距在CSS中定义。此外，位置设置为绝对

---

firebug告诉我marginleft没有定义。任何建议都会有帮助

测试托管页面后，似乎使用

marginLeft

而不是

“margin-left”

解决了问题

您还使用了jQuery 1.3.2而不是1.4.2。也许是因为这些因素

---

无论如何，我不知道为什么这种形式的左边距在JSFIDLE中不起作用，但这似乎是解决办法。

您检查了cls中的内容了吗？也许添加case-else语句对测试有用？此外，一个console.log（cls）可以帮助您使用您提供的代码，它在Firefox中对我有效。（当然没有图像）我在mac电脑（这是一台pc）上安装了firefox，并运行了代码，而引号标记没有使用鼠标悬停来设置动画。段落文本正在更改，但引号标记没有移动。

cls

在我发布的JSFIDLE中定义，并且标记正在移动。JSFIDLE对你有用吗？我正在Mac上使用最新的Firefox。当然，它移动的唯一证据就是滚动条的变化。这里有一个更新，我给出了

hover（）

它的第二个函数（应该有两个），它将边距返回到0。此外，我还放置了一个“X”以使标记具有一定的可见性@皮特-很高兴我能帮上忙o）