当前位置：文江博客话题详情

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

发布于 2024-10-24 19:30:36 字数 227 浏览 3 评论 0原文

我试图获得类似于此的悬停效果示例< /a>.但没能得到。这是链接

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

污味仙女 2024-10-31 19:30:36

您的

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

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

Your <script> tag references a jquery-1.2.6.min.js which does not exist. Put that file in the same directory as hovereffect.html on your web server.

Or, perhaps even better, get JQuery from Google Libraries:

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

回复收藏 0 原文

半衬遮猫 2024-10-31 19:30:36

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

回复收藏 0 原文

去了角落 2024-10-31 19:30:36

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

On test page this is your css:

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

On production page:

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

Add position: relative to .project .thumb

回复收藏 0 原文

柏林苍穹下 2024-10-31 19:30:36

它不起作用的原因是因为您缺少 css 属性

.project .thumb img {position:absolute}

通知，您的测试页中有此行。

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

此外 .project .thumb a line 缺少宽度和高度。

另请注意，如果您只是添加该行，效果仍然不会达到您预期的效果。创建一个带有 overflow:hidden 的外部 div。

The reason it's not working is because you are missing a css property

.project .thumb img {position:absolute}

notice that you have this line in your test page.

the way you are using jQuery's animate function to change the position of the top image {top:150px}, so you need make it absolutely position for this to work.

Also the .project .thumb a line is missing it's width and height.

Also note that if you just add that line, the affect still won't be the way you expect. Create an outer div with an overflow:hidden.

回复收藏 0 原文