Question

我正在尝试使悬停上的引导卡的图像模糊，但无法正常工作。在没有悬停的情况下，模糊效果很好。

这是我的代码（但是我尝试了很多事情）：

.card-img {
    transition: all 1s ease;
    -webkit-filter: blur(0px); /* Chrome, Safari, Opera */
    filter: blur(0px);
}

.card-img:hover {
    transition: all 1s ease;
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card bg-dark text-white mt-4 mb-3 border-dark">
    <img class="card-img img-fluid" src="https://www.flightnetwork.com/blog/wp-content/uploads/2018/06/header-journey11.jpg" alt="Card image">
    <div class="card-img-overlay">
      <h1 class="card-title underline">Bienvenue sur le site de Motard d'Alsace !</h1>
      <p class="card-text p1 bg-dark">Trouve dès maintenant ta prochaine balade moto</p>
      <p class="card-text bg-dark">Ou partage tes propositions de balades !</p>
    </div>
</div>

感谢您的帮助

Answer 1

问题在于card-img-overlay覆盖了整个card-img元素。因此，它无法判断您将鼠标悬停在card-img div上。

要解决此问题，请检查父卡是否悬停，并从选择器中排除card-img-overlay。

.card-img {
    transition: all 1s ease;
    -webkit-filter: blur(0px); /* Chrome, Safari, Opera */
    filter: blur(0px);
}

.card:hover > *:not(.card-img-overlay) {
    transition: all 1s ease;
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card bg-dark text-white mt-4 mb-3 border-dark">
    <img class="card-img img-fluid" src="https://www.flightnetwork.com/blog/wp-content/uploads/2018/06/header-journey11.jpg" alt="Card image">
    <div class="card-img-overlay">
      <h1 class="card-title underline">Bienvenue sur le site de Motard d'Alsace !</h1>
      <p class="card-text p1 bg-dark">Trouve dès maintenant ta prochaine balade moto</p>
      <p class="card-text bg-dark">Ou partage tes propositions de balades !</p>
    </div>
</div>

悬停时模糊引导程序卡的图像

1 个答案: