影響圖像鼠標懸停

Question

看看這個：

當指針在圖像上我想在一些文本這個圖像的底部一條小黑色矩形。我怎樣才能做到這一點？也許與jQuery？

謝謝你們。

Answer 1

是的，你可以很容易地使用jQuery來實現這一點。 如果你想學習的全過程，並自己動手，看看這個 - Sliding Boxes and Captions with jQuery 或者看一看達到同樣效果的幾個插件 - 10 Stylish jQuery caption plugins

Answer 2

你可以做到這一點很多方面。根據您的頁面結構，您可以使用幾個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上的working example。此解決方案默認隱藏文本，當用戶將鼠標懸停在div上時，：hover類將導致文本顯示。

你也可以使用jQuery來添加或顯示div onmouseover。