javascript - マウスオーバー時の画像の効果

Question

これを見て：

ポインターが画像上にある場合、この画像の下部にテキストを含む小さな暗い四角形が必要です。これどうやってするの？多分jqueryで？

みんなありがとう。

Answer 1

これは多くの方法で実現できます。ページの構造によっては、いくつかの CSS クラスを使用してこれを実現できます。

HTML:

<div class="image_hover"><span>Text</span></div>

CSS:

.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }

特定の状況に基づいて、いくつかの更新を行う必要があります。jsbinの実際の例を次に示します。このソリューションでは、デフォルトでテキストが非表示になり、ユーザーが div にカーソルを合わせると、:hover クラスによってテキストが表示されます。

jQuery を使用して、div onmouseover を追加または表示することもできます。

Answer 2

ええ、jquery を使用して簡単にそれを実現できます。プロセス全体を学び、自分でやりたい場合は、これを見てください - Sliding Boxes and Captions with jQuery または、同じ効果を実現するためのいくつかのプラグインを見てください - 10 のスタイリッシュな jQuery キャプション プラグイン