在元素悬停时显示说明
[英]On element hover show description
问题描述
I have few elements in a row. 
我连续有几个元素。 I want to display just img and when you hover on it the description would be shown below. 我只想显示img，当您将鼠标悬停在上面时，说明将显示在下面。 It works fine but when description is shown the whole div expands and it mess up the row. 它工作正常，但是当显示说明时，整个div会扩展，并且会使行弄乱。 How can i set it to be 我如何将其设置为
- exact same width and height all the time 始终保持相同的宽度和高度
- the text should just display on pic below. 该文本应仅显示在下面的图片上。
Here is the code: 这是代码：
$(document).ready(function() { $('.box').hover(function() { $(this).find('.details').show(500); $(this).addClass('higlighted'); }, function() { $('.details').hide(500); $(this).removeClass('higlighted'); }) });
.products { justify-content: center; } .products-description { padding-top: 50px; padding-bottom: 50px; } .products-description h1 { font-family: 'Homenaje', sans-serif; font-size: 50px; padding-bottom: 40px; } .products-description p { font-family: 'Mada', sans-serif; font-weight: 300; font-size: 22px; } .box { padding-bottom: 3em; padding-top: 3em; } .box .details { display: none; transition: 1s; } .box .details p { font-size: 14px; } .higlighted { background: rgba(98, 192, 23); position: absolute; transition: 1s; }
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div>
3 个解决方案
解决方案1
3 2019-03-18 10:50:36
You can set the width of .higlighted as the width of .box : 您可以设置宽度.higlighted为宽度.box ：
$(document).ready(function() { $('.box').hover(function() { $(this).find('.details').show(500); $(this).addClass('higlighted'); var w = $('.box').width(); $('.higlighted').css({width: `${w}`}); }, function() { $('.details').hide(500); $(this).removeClass('higlighted'); }) });
.products { justify-content: center; } .products-description { padding-top: 50px; padding-bottom: 50px; } .products-description h1 { font-family: 'Homenaje', sans-serif; font-size: 50px; padding-bottom: 40px; } .products-description p { font-family: 'Mada', sans-serif; font-weight: 300; font-size: 22px; } .box { padding-bottom: 3em; padding-top: 3em; } .box .details { display: none; transition: 1s; } .box .details p { font-size: 14px; } .higlighted { background: rgba(98, 192, 23); position: absolute; transition: 1s; }
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div>
解决方案2
2 2019-03-18 10:54:45
used css to achieve it. 用css实现它。
.box:hover .details{
display: block;
transition: 1s;
}
.box:hover{
background: rgba(98, 192, 23);
transition: 1s;
}
let me know if anything else needs to be changed. 让我知道是否需要更改其他内容。 thanks 谢谢
.products { justify-content: center; } .products-description { padding-top: 50px; padding-bottom: 50px; } .products-description h1 { font-family: 'Homenaje', sans-serif; font-size: 50px; padding-bottom: 40px; } .products-description p { font-family: 'Mada', sans-serif; font-weight: 300; font-size: 22px; } .box { padding-bottom: 3em; padding-top: 3em; } .box .details { display: none; transition: 1s; } .box .details p { font-size: 14px; } .higlighted { background: rgba(98, 192, 23); position: absolute; transition: 1s; } .box:hover .details{ display: block; transition: 1s; } .box:hover{ background: rgba(98, 192, 23); transition: 1s; }
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div>
解决方案3
0 2019-03-18 11:06:47
It's your css property transition: 1s that causing you trouble because you're doing that with jQuery as well with hide(500) and show(500) . 这是您的css属性transition: 1s会给您带来麻烦，因为您同时使用jQuery和hide(500)和show(500) 。
If you're doing the jQuery way, you just have to remove the css property. 如果您使用jQuery方式，则只需删除css属性。
The height is adjusting dynamically because of the transition. 由于过渡，高度正在动态调整。 If you don't want that, either do not use transition or do it @Mamun's way. 如果您不想这样做，请不要使用transition或以@Mamun的方式进行。
$(document).ready(function() { $('.box').hover(function() { $(this).find('.details').show(500); $(this).addClass('higlighted'); }, function() { $('.details').hide(500); $(this).removeClass('higlighted'); }) });
.products { justify-content: center; } .products-description { padding-top: 50px; padding-bottom: 50px; } .products-description h1 { font-family: 'Homenaje', sans-serif; font-size: 50px; padding-bottom: 40px; } .products-description p { font-family: 'Mada', sans-serif; font-weight: 300; font-size: 22px; } .box { padding-bottom: 3em; padding-top: 3em; } .box .details { display: none; } .box .details p { font-size: 14px; } .higlighted { background: rgba(98, 192, 23); }
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将鼠标悬停在图像上时显示说明 - show the description when hover the image
悬停时显示下一个元素 - On hover show next element
在元素悬停时显示跨度 - show a span on hover of an element
ReactJS 显示 hover 上的元素 - ReactJS show element on hover
任何显示图片和悬停显示说明的Jquery画廊 - Any Jquery gallery to show image and on hover show description
将鼠标悬停在隐藏的元素上以显示它 - Hover over a hidden element to show it
悬停以显示兄弟元素，但电影 - hover to show siblings element but flicks
chrome扩展名-需要在链接悬停时显示说明作为弹出窗口 - chrome extension - need to show the description on hover of the links as a popup
jQuery在框悬停时显示描述div，上下移动标题 - jQuery show description div on box hover, moving title up and down
如何为数组中的每个元素提供唯一的 hover 描述？ - How to have a unique hover description for every element in an array?
相关标签