html - 如何修复悬停未激活

Question

我有一个网站展示了使用 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;
}

我希望当用户将鼠标悬停在图像上时，它会恢复其原始分辨率，以便用户不会只看到裁剪后的图像

Answer 1

.card-img-overlay div 位于图像上方，因此永远不会触发悬停效果即使它被触发，我仍然不认为它会达到你想要的，因为图像会闪烁。你想做的最好用 JavaScript mouseenter 事件来完成