使用 JQuery 的悬停事件答案

【问题标题】：Hover Event using JQuery使用 JQuery 的悬停事件
【发布时间】：2011-03-02 19:18:14
【问题描述】：

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

$(文档).ready(函数(){ $("#icondesc a").hover(function(){ var cls = $(this).attr("class"); $(this).siblings("p").hide(); $(this).siblings("p."+ cls + "_qu").show(); 如果（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}); }); });

这是我的图标描述 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 中定义了一个背景图像和左边距。此外，位置设置为绝对。

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

【问题讨论】：

您检查过 cls 中的内容吗？也许添加 case else 语句对测试有用？此外，console.log(cls) 可以提供帮助
使用您提供的代码，它适用于我在 Firefox 中。 jsfiddle.net/dxZnT（当然没有图片）
我在 Mac（这是一台 pc）上安装了 firefox 并运行了代码，并且引用标记没有通过悬停进行动画处理。段落文本正在更改，但引号没有移动。
cls 是在我发布的 jsFiddle 中定义的，并且标记正在移动。 jsFiddle 是否为您工作？我在 Mac 上使用最新的 Firefox。
奇怪。当然，它移动的唯一证据就是滚动条的变化。这是一个更新，我给hover() 提供了它的第二个函数（它意味着有两个），它将边距返回为 0。此外，我放置了一个“X”以使标记具有一些可见性。 jsfiddle.net/dxZnT/2

标签： jquery hover

【解决方案1】：

测试托管页面后，似乎使用 marginLeft 而不是 'margin-left' 可以解决问题。

您还使用 jQuery 1.3.2 而不是 1.4.2。可能是这个因素？

无论如何，我不知道为什么在 jsFiddle 中这种形式的边距在您的页面上不起作用，但这似乎是解决方法。

【讨论】：

@Pete - 很高兴我能帮上忙。 :o)