我有一个网站展示了使用 bootstraps 卡片组的设计。我使用 css 来确保卡片始终具有相同的宽度和高度,但我希望当用户将鼠标悬停在它以全分辨率显示的图像上时。它似乎没有了解我如何使用我的选择器
我已尝试查看 CSS 和 bootstrap 文档,但我无法完全找到我的代码哪里出错了。
HTML代码:
<div class="col-sm-6 d-flex justify-content-start ">
<div class="card-deck d-flex justify-content-start">
<div class="card bg-dark text-white">
<img class="card-img" src="https://images.unsplash.com/photo-1568312442641-d6c790fdf0f6?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="">
<div class="card-img-overlay">
<h5 class="card-title"><a class="text-white" href="C:\Users\Bruno\Desktop\bootstrap try outs\project find images\nature.html">Nature</a></h5>
</div>
</div>
</div>
</div>
我用来为所有卡片获得相同分辨率的 CSS 代码
.card-img {
width: 100%;
height: 35vw;
object-fit: cover;
}
应该使 img 在悬停时全尺寸的 CSS 代码。 (我也试过只使用类选择器)
div>.card-img:hover{
width: 10%!important;
height: 100%!important;
object-fit: cover!important;
}
我希望当用户将鼠标悬停在图像上时,它会恢复其原始分辨率,以便用户不会只看到裁剪后的图像
最佳答案
.card-img-overlay
div 位于图像上方,因此永远不会触发悬停效果
即使它被触发,我仍然不认为它会达到你想要的,因为图像会闪烁。你想做的最好用 JavaScript mouseenter
事件来完成
关于html - 如何修复悬停未激活,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57949132/