javascript - 将鼠标悬停在图片上时显示说明
问题描述
我有 12 个带有图片和隐藏描述的元素。当我将鼠标悬停在图片上时,它会显示描述。图片和描述位于固定区域,带有一些背景颜色,但描述下方的图片是可见的,很难阅读描述。显示描述时如何完全覆盖下面的图片?假设图片是 200x200 像素,所以我想从图片顶部覆盖 50 像素。
这是代码:
$(document).ready(function() {
$('.box').hover(function() {
$(this).find('.details').show(500);
$(this).addClass('higlighted');
$(this).find('.details').css('visibility', 'visible');
}, function() {
$(this).find('.details').css('visibility', 'hidden');
$(this).removeClass('higlighted');
})
});
.products {
max-width: 1200px !important;
}
.products-description h1 {
font-family: 'Homenaje', sans-serif;
font-size: 50px;
padding-bottom: 40px;
padding-top: 2em;
}
.products-description p {
font-family: 'Mada', sans-serif;
font-weight: 300;
font-size: 22px;
padding-bottom: 3em;
}
.box {
margin-top: -5em;
}
.box .imgBox {
padding-top: 2em;
position: relative;
}
.box .details {
transition: 0.5s;
visibility: hidden;
}
.box .details p {
font-size: 14px;
color: #ffffff;
}
.higlighted {
background: rgba(98, 192, 23);
position: absolute;
transition: 0.5s;
cursor: pointer;
}
<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>
解决方案
唯一需要编辑的是 .highlighted 类的 CSS 和小 JQuery 脚本。
您可以在此处了解有关 z-index 的更多信息:
.higlighted {
background: rgba(98, 192, 23);
position: absolute;
transition: 0.5s;
cursor: pointer;
z-index: 1;
}
我已经使用您的逻辑来满足您的需求,即通过切换 imgBox 的 css 可见性类。
<script>
$(document).ready(function() {
$('.box').hover(function() {
$(this).find('.details').show(500);
$(this).addClass('higlighted');
$(this).find('.details').css('visibility', 'visible');
$(this).find('.imgBox').css('visibility', 'hidden');
}, function() {
$(this).find('.details').css('visibility', 'hidden');
$(this).find('.imgBox').css('visibility', 'visible');
$(this).removeClass('higlighted');
})
});
</script>
推荐阅读
- java - Spring Boot Rest:避免请求拒绝,消耗一切
- django - 我需要存储汽车的品牌和型号。我应该将汽车品牌/型号作为数据库表,还是应该将它们硬编码为字段选择?
- javascript - source-map-explorer 错误:检查您是否使用了正确的源映射
- flask - 使用 Python flask-awscognito 和 boto3/request 修复“CSRF 的状态不正确”
- html - 如何在 VSCode 中禁用 HTML 的自动多光标
- java - Eclipse STS 4 错误:找不到或加载主类
- python - 在 python 中使用多处理库运行 pyglet 的多个实例
- javascript - 根据谷歌电子表格数据修改谷歌日历(防止重复)
- go - 在 Golang 中使用带有 struct 关键字的标签
- gcc - 打印没有许可证/版权信息的 GCC 版本