1

我有一组nivo 滑块。我想为每一个附加一个阴影，所以我创建了包装器和绝对定位的阴影：

<div class="nivo-wrapper">
   (my slider code here)
   <img src="shadow.png" class="nivo-shadow" alt=""/>
</div>

CSS：

.nivo-wrapper {
    position: relative;
    padding: 0 0 30px 0;
    display: inline-block; /*inline block so it has the same width as slider */
    border: solid 1px red;
}

.nivo-shadow {
    position: absolute;
    left: 0;
    width: 100%; /* absolutely positioned 100% wide so fits its parent */
}

所以我有一组非常好的带有阴影的滑块，它们会自动改变宽度。

问题是 - 每次我悬停我的滑块时 - 我悬停的滑块下方的滑块会改变它的位置（“跳跃”大约 10px 上方）并且在鼠标移出时它会改变到它的“正确”位置。

当我将 nivo-shadows 位置更改为相对/静态时，它会停止（但是这样阴影的宽度错误）。

我很想向您展示发生了什么，但我无法让 Nivo 滑块在 jsfiddle 中工作（即使在复制粘贴所有 .js 和 .css 库之后）。

4

3 回答 3

1

没有看到它..我会这样说：

您必须使用 FireBug 检查 CSS 以查看导致 :hover 跳转的原因 - 一定有什么东西在做。听起来好像您的其中一个幻灯片容器的高度不正确。你能给 .nivo-wrapper 一个高度而不弄乱你的设计吗？

另外，您是否尝试过使用 top:0 或 bottom:0 作为阴影？好像可以影响的。。

于 2011-04-05T19:12:36.767 回答
0

我认为你应该为链接添加一个css规则，.nivo-shadow:hover { position: absolute; left: 0px; width: 100%; }这样一旦你将鼠标悬停它就会停留在那里......

于 2011-09-12T01:16:16.360 回答
0

我想说你必须纠正图像阴影的位置和块模型，即默认情况下的Replaced Element ：inline

 .nivo-shadow {
    display:block; /*<--update here*/
    position: absolute;
    left: 0;
    bottom:0; /*<--update here: you must declare it, or top */
    width: 100%; /* absolutely positioned 100% wide so fits its parent */
 }

事实上，一个绝对定位元素是根据“top”、“left”、“right”或“bottom”属性提供的坐标定位的。

于 2014-07-29T13:13:16.940 回答