[英]How to show hidden div on mouse over using jquery?
I want to show hidden div
on hover of <div class="thumb">
and i have multiple div
on page each thumb div
has different content images. 我想在
<div class="thumb">
悬停时显示隐藏的div
,并且页面上有多个div
,每个拇指div
具有不同的内容图像。 width
is fix for all div
but height
of large div <div class="large" style="display:none">
can be extended upon content after the image inside div. width
对于所有div
都是固定的,但是大div的height
<div class="large" style="display:none">
可以在div内的图片之后的内容上扩展。
Text of h2
will be always the same in both div
. 在两个
div
, h2
文本将始终相同。
If mouse is inside < div class="large"></div>
then the div
should stay on screen. 如果鼠标位于<
div class="large"></div>
则div
应该留在屏幕上。
<!----------------- Small Boxes ----------------->
<div class="thumb">
<h2>Box1</h2>
<img src="test_files/images/thumbnail/thumb1.png" />
</div>
<!----------------- Large Boxes on hover ----------------->
<div class="large" style="display:none">
<h2>Box1</h2>
<h3>Heading 3 (this text will come over the image)</h3>
<img src="test_files/images/large/large1.png" />
<p>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</p>
</div>
I just given a example of one div
but in actual I will have multiple boxes on actual page. 我只是给出了一个
div
的示例,但实际上我将在实际页面上有多个框。
Image to understand the question 图片了解问题
In actual page I will have multiple boxe like this 在实际页面中,我将有多个像这样的方框
$('.thumb').mouseover(function() { $(this).next().css('display', 'block'); }); $('.thumb').each(function(i, item) { $(this).next().mouseout(function() { $(this).css('display', 'none'); }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.