如何在圖像上顯示文字

我想在圖像上顯示文字。每當有人將鼠標懸停在圖像上時。如何在圖像上顯示文字

我的股利塊是：

<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

如何在圖像上顯示文字

回答

相關問題