Question

我有一个网站，上面显示了使用引导卡套的设计。我使用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;
}

CSS代码，可使img悬停时变大。（我也尝试只使用类选择器）

div>.card-img:hover{
  width: 10%!important;
  height: 100%!important;
  object-fit: cover!important;
}

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

Answer 1

\ div位于图像顶部，因此悬停效果永远不会触发即使它被触发，我仍然认为它不会达到您想要的效果，因为图像会闪烁。您想要做的最好是通过JavaScript .card-img-overlay事件

完成

如何解决悬停未激活的问题

1 个答案: