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

Question

我正在尝试获得类似于此示例的悬停效果。但拿不到。这是链接

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

看起来复制到新页面的代码缺少位置：相对，这将解决问题。现在，为了安全起见，您可能希望限制块的高度并将溢出设置为隐藏。

score 1 · Accepted Answer

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

.project .thumb img {position:absolute}

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

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

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

另请注意，如果您只是添加该行，效果仍然不会是您期望的方式。创建一个div带有overflow:hidden.

score 1 · Accepted Answer

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

score 1 · Accepted Answer

在测试页面上，这是您的 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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

（此外，您的网页似乎并没有真正将 404 作为错误 URL 提供服务）

希望这可以帮助

-克里斯

7 回答 7