Question

我有一套nivo sliders。我想为每个人添加一个阴影，所以我创建了包装器和绝对定位的阴影：

<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阴影位置更改为相对/静态时停止（但这样阴影的宽度错误）。

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

Answer 1

没有看到它..我会说：

你必须使用FireBug检查CSS以查看导致跳转的原因：悬停 - 必须有一些东西在做。听起来好像你的一个幻灯片容器的高度不正确。你可以给.nivo-wrapper一个高度而不会弄乱你的设计吗？

另外，您是否尝试使用top：0或bottom：0作为阴影？这似乎可以影响它..

Answer 2

我认为你应该为链接.nivo-shadow:hover { position: absolute; left: 0px; width: 100%; }添加一条css规则，所以一旦你盘旋它就会留在那里......

Answer 3

我会说您必须更正图像阴影的位置和块模型，默认情况下为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 */
 }

实际上，根据通过“顶部”，“左侧”，“右侧”或“底部”属性提供的坐标来定位一个absolute positioned元素。

HTML / CSS - 内联块显示和绝对定位

3 个答案: