[英]show the description when hover the image
I have this HTML : 我有这个HTML:
<div class="left_area">
<div class="caption">
<a href="<?php echo $URL; ?>"><img src="<?php echo $images; ?>" alt="<?php echo $name; ?>" /></a>
<span>test</span></div>
</div>
i want when i go over the image with the mouse to display whatever i want in that span, even an image of a but button or bold text. 我想用鼠标移到图像上以显示该范围内的任何内容,甚至是按钮或粗体文本的图像。 something like this EXAMPLE
像这样的例子
Thanks in advance! 提前致谢!
Try something like this - DEMO 试试这样的东西- 演示
CSS 的CSS
.caption {
position: relative;
width: 300px;
cursor: pointer;
}
span {
display: none;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, .7);
height: 200px;
width: 300px;
color: #fff;
}
JS JS
$('.caption').on({
mouseover: function() {
$(this).find('span').fadeIn(200);
},
mouseout: function() {
$(this).find('span').stop().fadeOut(200);
},
})
Try this 尝试这个
$(document).ready(function(){
$('a','.caption').mouseenter(function(){
$('span',$(this).parent()).show();
}).mouseleave(function(){
$('span',$(this).parent()).hide();
});
}); });
reference http://jsfiddle.net/puu5u/9/ 参考http://jsfiddle.net/puu5u/9/
You can do this in CSS 您可以在CSS中执行此操作
<div class="image">
<p class="caption">Some info related the pic</p>
<img src="http://i.imgur.com/VMaxsb.jpg" />
</div>
.image {float: left; position: relative;}
.image .caption {width: 100%; height: 100%; background: rgba(0,0,0,0.82); position: absolute; color: #fff; display: none}
.image:hover .caption {display: block;}
Demo - http://jsfiddle.net/hqLjz/ 演示-http://jsfiddle.net/hqLjz/
Try this: 尝试这个:
$('ul li').mouseenter(function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeIn();
}).mouseleave(function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeOut();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.