3

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

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

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

3 に答える 3

3 
<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 class="title"><%= pag.page.page_title %></div>
</div>

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

.title{
    width:70px;
    border-radius:20px;
    background:white;
    color:blue;
    border:3px blue solid;
    display:none;

}

​$('.icon_link').hover(function(){
    $(this).next().slideDown(200);
},function(){ 
    $(this).next().slideUp(200);
});​

デモ

于 2012-10-16T11:58:18.383 に答える
1

純粋な CSS でそれを行いたい場合は、position: relativeimage という名前のスパンを含む部門 (div) の background-image として画像をロードすることをお勧めします。そのスパンは非表示にして配置するposition: absolute 必要があるため、次のことを行うだけです。

div.CLASS:hover > span.child {
 // show the span or blah blah...
}
于 2012-10-16T09:50:30.040 に答える
0

通常、title 属性はブラウザによって解釈され、要素の上にカーソルを合わせるとツールチップとして表示されます。したがって、これには jQuery は必要ありません。

この動作の問題は、このツールチップの書式設定をあまり制御できないことです。ただし、カスタム セクションでこの値を表示およびフォーマットする場合は、これらの画像の .hover() イベントをサブスクライブできます。

$(function() {
    $('img').hover(function() {
        var title = $(this).attr('title');
        // TODO: do something with the title
    }, function() {
        // this will be triggered when the mouse pointer leaves the element
    });
});
于 2012-10-16T09:46:11.957 に答える