1

サムネイル画像にカーソルを合わせたときにテキストを表示するにはどうすればよいですか？チュートリアルをいくつか見つけましたが、以下のようなリスト構造で機能する必要があります。できれば、追加のliまたはキャプションとして。

参考サイトはこちら：http：//owenmyers.co.uk/TESTING/

 #item {
position:absolute;
top:117px;
width:711px;
height:100%;
left:150px;
z-index:1;
}
.item {
    margin:0px;
}
.item.first {
    clear: left;
    margin-left: 0;
}
.item img {
    opacity:0;
    border:1px solid #000;
}

.item ul {
    display:inline;
    list-style-type:none;
    list-style:none;
    float:left;
    width:721px;
    padding:0px 0px;
    margin-left:-5px;
    z-index:5;
}
.item ul li {
    display:inline;
    float:left;
    list-style-type:none;
    list-style:none;
    float:left;
    width:170px;
    height:115px;
    padding:0px 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight:600;
    text-transform: none;
    color: #000000;
    text-decoration: none;
}

<div id="item" class="item">
<ul style="margin-top:0px;">
<li class="item"><a href="#"><img src="img/holderthumb.jpg"/></a></li>
<li><a href="#"><img src="img/holderthumb.jpg"/></a></li>
<li><a href="#"><img src="img/holderthumb.jpg"/></a></li>
<li><a href="#"><img src="img/holderthumb.jpg"/></a></li>
</ul>
4

1 に答える 1

1

画像ごとに属性を追加する必要がありますalt。たとえば
<img src="img/holderthumb.jpg" alt="Description Here"/>
、タイトル属性を実行することもできます
<img src="img/holderthumb.jpg" title="Description Here"/>

それが済んだら、それらの属性（または）を取得して表示する簡単なスクリプトを作成できます。たとえば、ここに例があります

$("img#id").hover(
function(){
    var desc = $(this).attr("title"); //Or $(this).attr("alt");
    $("divthatcontainstext").html(desc); //Puts attribute text into div that needs text
}, //Hover Encompasses Mouse on and Mouse off into one function
function(){
    $("divthatcontainstext").html(""); //Clears div with text
});

それがあなたの質問の根拠だったと思います。コードがまたはのいずれ$(document).ready(function(){});かのラッパーであることを確認してください$(function(){});

于 2012-05-22T20:48:32.570 に答える