1

カーソルを下に近づけたときにスライド パネルを表示する必要がある Web ページがあります。

これは前です。

モックアップ

この後です

モックアップ

私が見た最も近い効果は、https: //read.amazon.com で電子書籍を読んでいて、カーソルが十分に近づくと上部と下部のコントロールが表示されることです。

この質問を間違ったスタックエクスチェンジに配置した場合は、お詫び申し上げます。

アップデート：

画面が垂直方向にスクロール可能であっても、下にスライドする要素は常に画面の下部に表示される必要があるため、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

expactingの場所にdivを配置し、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 に答える