如何在图像上显示文字 [英] How to display text over image
问题描述
我想在图片上显示文字。每当有人将鼠标悬停在图片上。
I want to display text over image. Whenever someone hover mouse over the image.
我的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函数的其余部分是:
And rest of the CSS and JavaScript Function is:
<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;}
我试图做的是这里显示。 a href =http://laurencekim.com/ =nofollow>点击此处
What i am trying to do is shown here.please take a look :click here
类似于此页面我想显示文本只要有人将鼠标悬停在图像上,就会出现图像。可以有人请帮助我...
Similar to this page i want to display text over the image whenever someone hover mouse on the image. Can someone please help me out...
推荐答案
我用最简单的方式建立一个小提琴。 p>
I build up a fiddle with the simpliest way I could think of.
$('#hover1').mouseover(function(){
$('#hoverDiv1').css('opacity', 1)
});
$('#hover1').mouseout(function(){
$('#hoverDiv1').css('opacity', 0)
});
请参阅小提琴
悬停效果位置不正确,因为需要定义li。
它只是为了显示一个简单的jQuery方式。
Hover effect is not correctly positioned, because "li" needs to be defined. It is just to show an easy jQuery way.
最好
这篇关于如何在图像上显示文字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!