목록의 썸네일 onhover에 Jquery 텍스트 오버레이

Question

미리보기 이미지를 가져올 때 텍스트를 표시하려면 어떻게해야합니까? 일부 자습서를 찾았지만 아래 목록 구조에서 작동해야합니다. 가능하다면 추가 리튬 또는 자막으로 사용하십시오. 참조

사이트는 여기에 있습니다 : 각 이미지에 대한 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> 

Answer 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(){});이