如何在悬停缩略图时显示文字 - 我找到了一些教程,但我需要它在下面的列表结构中工作。优选作为附加的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>
答案 0 :(得分: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(){});