CSS在悬停时显示较大的图像
CSS在悬停时显示较大的图像
提问于 2018-07-07 22:57:57
我有一个产品页面，上面有一个较小的产品图片。现在，我希望显示此图像的放大版本，彩色背景覆盖整个页面，同时悬停较小的图像。
问题是，当我移动鼠标时，较大的图像会闪烁。我的CSS：
#zoomed-product-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(162, 130, 192, 0.8);
z-index: 0;
visibility: hidden;
}
#zoomed-product-img img {
display: block;
margin: auto auto;
}
.productsdetail-image:hover~#zoomed-product-img {
visibility: visible;
}我的HTML：
<div class="productdetails">
<div class="productsdetail-image">
<img src="/assets/images/products/{{page.name}}.png" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
<div id="zoomed-product-img">
<img src="/assets/images/products/{{page.name}}.png" alt="Produktbild">
</div>
你能帮帮我吗?也许我的思维方式是错的。我认为它闪烁是因为当我显示较大的图像时，它位于(z索引)较小的图像之上，并且我不再悬停图像，因此它消失了。
我也很乐意用javascript解决这个问题，如果你能给我任何建议的话。
回答 1
Stack Overflow用户
发布于 2018-07-08 01:58:10
请查看整页内容
$(document).ready(function(){
$('.productsdetail-image img').hover(function() {
$(this).hide();
$('#zoomed-product-img ').show(500);
});
$('#zoomed-product-img .close').click(function(){
$(this).parent().hide();
$('.productsdetail-image img ').show();
});
}); .productsdetail-image img {
width: 150px;
height: auto;
transition: all 0.5s ease;
}
#zoomed-product-img {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
#zoomed-product-img span.close {
position: absolute;
color: #fff;
cursor: pointer;
top: 20px;
right: 20px;
}
#zoomed-product-img img {
position: absolute;
width: 300px;
height: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: aUto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productdetails">
<div class="productsdetail-image">
<img src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div id="zoomed-product-img">
<span class="close">close</span>
<img class="zoom-img" src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
你想做这样的东西吗？希望那把小提琴能帮到你
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51224334
复制相关文章
相似问题