Как отобразить текст поверх изображения

Question

Я хочу отобразить текст поверх изображения. Всякий раз, когда кто-то наводил курсор мыши на изображение.

Мой Div блок:

<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

Hover эффект не правильно установлен, потому что "Ли" должен быть определен. Это просто показать простой способ jQuery.

Лучшие