如何使用 jQuery 获得悬停效果？它不适合我

Posted 2023-05-09

【中文标题】如何使用 jQuery 获得悬停效果？它不适合我

【英文标题】：how to get a hover effect with jQuery?? Its not working for me

【发布时间】：2011-07-17 18:47:37

【问题描述】：

我正在尝试获得类似于 example 的悬停效果。但拿不到。这是link

【问题讨论】：

我认为你必须问一些更具体的问题。

你能发布你的代码吗？

@Xint0 -- jsfiddle.net/priyaa2002/YZzWu/2

@MikeEast -- 当我将鼠标移到图像上时，什么也没有发生。

我更改了图片路径。仍然无法正常工作..任何见解？？

【参考方案1】：

您的<script> 标签引用了一个不存在的jquery-1.2.6.min.js。将该文件放在与您的 Web 服务器上的 hovereffect.html 相同的目录中。

或者，也许更好的是，从 Google Libraries 获取 JQuery：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

【讨论】：

@Priya 换句话说，您的 javascript 代码很好。问题是页面没有正确引用 jQuery 源代码。

我试图在我的代码中进行一些修改。我没有将图像显示为列表，而是尝试将它们放在 标记中。它的工作很好dragonfly.zymichost.com/hovereffect2.html。但是当我出于某种原因将它们放在我的实际页面中时，它不起作用..dragonfly.zymichost.com/projects1.html

【参考方案2】：

复制到新页面的代码似乎缺少 position:relative，这可以解决问题。现在，为了安全起见，您可能希望限制块的高度并将溢出设置为隐藏。

【参考方案3】：

在测试页面上，这是你的 css：

.thumb 
list-style: none;
float: left;
background: white;
width: 250px;
position: relative;/* this makes all the difference */

在生产页面上：

.project .thumb 
width: 260px;
float: left;

将position: relative 添加到.project .thumb

【参考方案4】：

它不工作的原因是因为你缺少一个 css 属性

.project .thumb img position:absolute

请注意，您的测试页中有这一行。

您使用 jQuery 的 animate 函数来更改顶部图像 top:150px 的位置的方式，因此您需要使其绝对位置才能工作。

.project .thumb a line 也缺少它的宽度和高度。

还请注意，如果您只是添加该行，效果仍然不会是您所期望的方式。使用overflow:hidden 创建一个外部div。

【参考方案5】：

您想在外部类 (.outer) 上指定 height:150px;。目前它设置为 250 像素，这太高了。

【参考方案6】：

这是因为在您的实际项目中，您的 css 位于 /css 目录中。因此，您的 CSS 样式正在寻找不存在的 /css/images/snbw_thumb.jpg。将您的 CSS 样式更改为 ../images/snbw_thumb.jpg，它应该可以修复它。

【参考方案7】：

由于 .project .thumb a 的 css 规则，您的图像是 404ing 它指向“images/snbw_thumb.jpg”，但您可能希望使用“/images/snbw_thumb.jpg”

错误网址：http://dragonfly.zymichost.com/css/images/snbw_thumb.jpg

好网址：http://dragonfly.zymichost.com/images/snbw_thumb.jpg

（另外，您的网页似乎并没有真正将 404 用作错误 URL）

希望对你有帮助

-克里斯