이미지 위에 텍스트를 표시하는 방법

Question

이미지 위에 텍스트를 표시하고 싶습니다. 누군가 이미지 위에서 마우스를 움직일 때마다.

<div class="MainDIV"> 
<br><br><br> 
<div class="popular_stores" align="center"> 

    <span style="font-size: 12pt;">Browse our list of stores that we have coupons, coupon codes, and promo codes for. 
    </span> 
    <br> 
    <ul> 
    <li> 
     <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" > 
    </li> 
    <li> 
     <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" > 
    </li> 
    <li> 
     <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" > 
    </li> 
</ul> 
</div></div> 

그리고 CSS의 휴식과 자바 스크립트의 기능은 다음과 같습니다 :

내 사업부 블록은

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 

$('.drama').mouseover(function(){ 
    alert("dss"); 
    var tt = $(this).parent().find('.toolTip'); 
    tt.html($(this).attr('title')); 
    tt.show(); 
}); 
$('.drama').mouseout(function(){ 
    var tt = $(this).parent().find('.toolTip'); 
    tt.hide(); 
}); 

</script> 


<style type="text/css"> 

body { 
    text-align: center; 
    } 

.MainDIV{ 
    padding:0; 
    width:700px;  
    display: inline-block; 
    background-color:white; 
    } 

.MainDIV ul 
{ 
list-style-type: none; 
} 

.MainDIV ul li { 
    display: inline-block; 
    padding : 1em; 
    } 

.MainDIV ul li img 
{ 

    padding: .2em ; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    background-color: #F5F5E3; 
} 

ul li div{display:none; background:white; opacity:.5; position:absolute;} 

내가 뭘 좀 해줘 봐 걸릴 표시됩니다하려고 노력하고 있어요 : click here

를

이 페이지와 비슷합니다. 누군가 이미지 위에 마우스를 올려 놓을 때마다 이미지 위에 텍스트를 표시하고 싶습니다. 누군가 나를 도울 수 있습니까?

Answer 1

나는 생각할 수있는 가장 간단한 방법으로 피들을 쌓습니다.

$('#hover1').mouseover(function(){ 
    $('#hoverDiv1').css('opacity', 1) 
}); 


$('#hover1').mouseout(function(){ 
    $('#hoverDiv1').css('opacity', 0) 
}); 

는 "리"가 정의 될 필요가 있기 때문에이 Fiddle

호버 효과가 올바르게 위치하지 참조하십시오. 간단한 jQuery 방법을 보여 주기만하면됩니다.

최상위