延迟悬停效果 - 防止关闭覆盖

Question

我创建了一个悬停效果，使图片模糊并出现文本描述。

现在只要我将鼠标悬停在描述上方，我就不会将图像悬停并且效果失败，我想防止这种情况发生。

我假设如果我可以定位描述的悬停 - 版本，我可以将其设置为可见，但我不确定这一点。

我还有什么其他想法可以创建这个吗？

.flexbox{
position: relative;
display: flex;
height: 70vh;
flex-direction: row;
width: 90%;
margin-left: 5%;
max-height: 80vh;

}

.container{
  width: 100%;
  max-height: inherit;
  padding: 0;
  margin: 1%;
  display:block;
  text-align: center;
}

.image-category{
  width: 100%;
  object-fit: cover;
  height: 100%;
  opacity: 0.95;
  max-height: inherit;
  overflow: hidden;
}

.image-description{
padding: 10px;
transform: translateY(-30vh);
opacity: 0;
z-index: -1;
font-size: 20px;
}

.image-category:hover{
  filter: blur(2px);
}

.image-category:hover ~ .image-description{
  opacity: 100;
  z-index: 2;
}

.description{
font-size: 1.25em;
background: rgba(255, 255, 255, 0.7);
}

.claim{

padding: 1vh 0 1vh 0;
width: 100%;
text-align: center;
}

Delay Hover
    <div class="flexbox" id="flex">

      <div class="container" id="box1">
        <a class="image-category" href="https://amh-solingen.de/scheren.html">
        <img class="image-category" id="product3" src="/images/Schere.jpg">
        </a>
        <div class="image-description">
          <p class="description">Haushalts- und Friseurscheren</p>
        </div>
      </div>

      <div class="container" id="box2">
        <a class="image-category" href="https://amh-solingen.de/haushaltsmesser.html">
        <img class="image-category" id="product2" src="/images/Hero.png">
        </a>
        <div class="image-description">
          <p class="description">Aktuelle Auswahl an Küchenmessern</p>
        </div>
      </div>

      <div class="container" id="box3">
        <a class="image-category" href="https://amh-solingen.de/klingen.html">
        <img class="image-category" id="product3" src="/images/Klinge_7.jpg">
        </a>
        <div class="image-description">
          <p class="description">Klingen für Haushaltsmesser</p>
        </div>

      </div>
    </div>

Answer 1

使用此代码：

.flexbox{
position: relative;
display: flex;
height: 70vh;
flex-direction: row;
width: 90%;
margin-left: 5%;
max-height: 80vh;

}

.container{
  width: 100%;
  max-height: inherit;
  padding: 0;
  margin: 1%;
  display:block;
  text-align: center;
}

.image-category{
  width: 100%;
  object-fit: cover;
  height: 100%;
  opacity: 0.95;
  max-height: inherit;
  overflow: hidden;
}

.image-description{
padding: 10px;
transform: translateY(-30vh);
opacity: 0;
z-index: -1;
font-size: 20px;
}

.container:hover .image-category{
  filter: blur(2px);
}

.container:hover .image-description{
  opacity: 100;
  z-index: 2;
}

.description{
font-size: 1.25em;
background: rgba(255, 255, 255, 0.7);
}

.claim{

padding: 1vh 0 1vh 0;
width: 100%;
text-align: center;
}

Delay Hover
    <div class="flexbox" id="flex">

      <div class="container" id="box1">
        <a class="image-category" href="https://amh-solingen.de/scheren.html">
        <img class="image-category" id="product3" src="/images/Schere.jpg">
        </a>
        <div class="image-description">
          <p class="description">Haushalts- und Friseurscheren</p>
        </div>
      </div>

      <div class="container" id="box2">
        <a class="image-category" href="https://amh-solingen.de/haushaltsmesser.html">
        <img class="image-category" id="product2" src="/images/Hero.png">
        </a>
        <div class="image-description">
          <p class="description">Aktuelle Auswahl an Küchenmessern</p>
        </div>
      </div>

      <div class="container" id="box3">
        <a class="image-category" href="https://amh-solingen.de/klingen.html">
        <img class="image-category" id="product3" src="/images/Klinge_7.jpg">
        </a>
        <div class="image-description">
          <p class="description">Klingen für Haushaltsmesser</p>
        </div>

      </div>
    </div>