[英]How to display text over 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函数是:
<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;}
与此页面类似,每当有人将鼠标悬停在图像上时,我都希望在图像上显示文本。 有人可以帮我吗...
我用我能想到的最简单的方法来摆弄小提琴。
$('#hover1').mouseover(function(){
$('#hoverDiv1').css('opacity', 1)
});
$('#hover1').mouseout(function(){
$('#hoverDiv1').css('opacity', 0)
});
请看这个小提琴
悬停效果未正确定位,因为需要定义“ li”。 这只是为了显示一种简单的jQuery方式。
最好
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.