如何在图像上显示文字

我想在图像上显示文字。每当有人将鼠标悬停在图像上时。如何在图像上显示文字

我的股利块是：

<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

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

来源

2013-04-22 vaibhav jain

他们只使用CSS来帮助这一点。大约有1001种方法可以做到这一点。 – SpYk3HH 2013-04-22 17:28:34

而我显示'li'作为行内块，所以我不能放置另一个DIV块。它会破坏我的Html结构..... – 2013-04-22 17:28:50

他们使用'span'标签来做到这一点，默认情况下也是内联。但你也可以浮动你的''标签而不是内联。使用'position：absolute;'''span''标记，你可以在'li'的悬停处将它们从隐藏变为可见' – Andy 2013-04-22 17:32:12

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

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


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

请参阅本Fiddle

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

最好

来源

2013-04-22 17:49:14 xhallix

每当鼠标进入DIV块时，您正在显示图像。但是，只要鼠标悬停在图像上，我就想显示文字。 – 2013-04-22 18:06:08

只要鼠标悬停在直接围绕图像的li上，就会产生效果您也可以将id传递给 xhallix 2013-04-22 18:10:58

换出＃hoverDiv1与您将添加到图像的图像的ID，然后jQuery。 – RandomUs1r 2013-04-22 18:12:02

如何在图像上显示文字

回答

相关问题