1

当您将光标悬停在足够靠近底部时，我有一个网页需要显示一个滑动面板。

这是以前。

小样

这是之后

小样

我看到的最接近的效果是在https://read.amazon.com中，当您阅读电子书时，当您的光标移动得足够近时，顶部和底部控件就会出现。

如果我将此问题放在错误的 stackexchange 中，我深表歉意。

更新：

让我解释一下，即使屏幕可以垂直滚动，底部向上滑动的元素也应该总是出现在屏幕的底部，所以我想，它不仅仅是使用 jQuery.hover。

另一个更新：

我还想补充一点，当光标悬停在足够近但不在元素本身上时，会触发元素向上滑动。

4

2 回答 2

1

1. 获得悬停效果：

您可以考虑使用 JavaScript，更具体地说是jQuery .hover()

HTML：

<p>A bunch of text here ...</p>
<div id="toHover">
     <div id="toShowOnHover">This is something to show</div>
</div>

JS：

$("#toHover").hover(
  function() { $("#toShowOnHover").show(); },
  function() { $("#toShowOnHover").hide(); }
);

2. 将 div 保持在底部：

CSS：

#toHover {position: fixed; bottom: 0px; left: 0px; width: 100%; height: 40px; }
#toShowOnHover {background-color:red; height: 40px; }

查看JS Fiddle看看它是否是您的想法

于 2012-12-11T07:12:18.893 回答
0

您将 div 放置在 expacting 位置并设置 css 类和悬停效果：

html:

<div class="slider"></div>

CSS：

.slider {

  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 40px;
  background-color: red;
  opacity: 0.1; (Or 0 if invisible)

}

.slider:hover {

   opacity: 1;

}

我为你创建了一个 jsfiddle：http: //jsfiddle.net/E7U78/

于 2012-12-11T07:09:27.177 回答