如何在图像上显示文字

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的休息和JavaScript函数：

<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;} 

我试图显示做here.please看一看：click here

与此页面类似，我希望在图像上有人将鼠标悬停在图像上时在图像上显示文字。有人可以帮助我...

Answer 1

我用我能想到的最简单的方法建立一个小提琴。

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


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

请参阅本Fiddle

悬停效果的位置不正确，因为“礼”需要加以界定。 这只是为了展示一个简单的jQuery方式。

最好