0

データベースから動的に取得される画像はほとんどありません。

ユーザーが画像にカーソルを合わせると、名前が画像の下に表示されます。

CSSまたはjqueryでこれを行うにはどうすればよいですか？

下の画像を確認してください。これが本来あるべき姿です。

ここに画像の説明を入力してください

私のコードは

<div class="blue_strip_icon" style="padding-right: 15px;">
    <a href="<%= pag.page.id %>" class="icon_link">
    <img src="<%= @icon %>" title="<%= pag.page.page_title %>" />
    </a>
</div>

CSSは

.blue_strip_icon{
    float: right;
    height: 50px;
    padding-top: 10px;
}
4

4 に答える 4

2

更新されたデモ：http： //jsfiddle.net/n66Tf/1/

CSS :afterpsuedo要素を使用して、カスタマイズされたツールチップ要素を作成できます。

このデモを確認してください：http： //jsfiddle.net/n66Tf/

HTML：

<!-- render the tooltip text from the server itself -->
<a href="http://google.com" tooltip="Hello World">Hello</a>

CSS：

a {
    position: relative;
    overflow: visible;   
}
a:hover:after {
    content: attr(tooltip); /* use the tooltip attribute instead of hardcoding */
    color: blue;
    top: 22px;
    position: absolute;
    white-space: nowrap;
}
于 2012-10-16T10:09:28.880 に答える
1

jQueryツールチップなどのプラグインを使用して、ツールチップを画像として表示します

于 2012-10-16T10:05:56.747 に答える
1

次のように兄弟~セレクターを使用できます：http：//jsfiddle.net/Zp2Bv/

于 2012-10-16T10:09:46.600 に答える
0

このチュートリアルはあなたを助けることができます：http：//net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/

于 2012-10-16T10:08:39.957 に答える