悬停时img上的文本覆盖

Question

到目前为止，我创建了一个container类，其中包含img元素和div元素，其中包含文本。我的目标是当用户将鼠标悬停在图像上时，使图像变得苍白并且一些文本出现在顶部。

下面的示例正在运行，但如果用户将鼠标悬停在包含文本的div上，div将会消失。有关如何禁用此行为的任何建议吗？

＆＃13;

＆＃13;

#container {
    position: relative;
    width:500px;
    height:auto;
}

#center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
}

#overlayImg {
    width: 100%;
    height: auto;
    opacity: 1;
    -webkit-transition: all 4s;
    transition: all 0.5s;
    transition-timing-function: ease;
}

#overlayImg:hover {
    opacity: 0.3;
}

#center{
    opacity: 0;
    -webkit-transition: all 4s; /* Safari */
    transition: all 1s;
    transition-timing-function: ease;
}

#overlayImg:hover + #center {
    opacity: 1;
}

＆＃13;

<div class="container" id="container">

    <img id="overlayImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/FuBK_testcard_vectorized.svg/768px-FuBK_testcard_vectorized.svg.png" alt="Norway" max-width="100px" max-height="100px">

    <div id="center" class="center"><h1>test test test<h1></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将pointer-events: none添加到div

#container {
  position: relative;
  width: 500px;
  height: auto;
}
#center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  pointer-events: none;
}
#overlayImg {
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition: all 4s;
  transition: all 0.5s;
  transition-timing-function: ease;
}
#overlayImg:hover {
  opacity: 0.3;
}
#center {
  opacity: 0;
  -webkit-transition: all 4s;
  /* Safari */
  transition: all 1s;
  transition-timing-function: ease;
}
#overlayImg:hover + #center {
  opacity: 1;
}

<div class="container" id="container">

  <img id="overlayImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/FuBK_testcard_vectorized.svg/768px-FuBK_testcard_vectorized.svg.png" alt="Norway">

  <div id="center" class="center">
    <h1>test test test</h1>
  </div>
  
</div>

或更新:hover这样的规则

#container:hover #overlayImg {
  opacity: 0.3;
}
#container:hover #center {
  opacity: 1;
}

#container {
  position: relative;
  width: 500px;
  height: auto;
}
#center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}
#overlayImg {
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition: all 4s;
  transition: all 0.5s;
  transition-timing-function: ease;
}
#center {
  opacity: 0;
  -webkit-transition: all 4s;
  /* Safari */
  transition: all 1s;
  transition-timing-function: ease;
}
#container:hover #overlayImg {
  opacity: 0.3;
}
#container:hover #center {
  opacity: 1;
}

<div class="container" id="container">

  <img id="overlayImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/FuBK_testcard_vectorized.svg/768px-FuBK_testcard_vectorized.svg.png" alt="Norway">

  <div id="center" class="center">
    <h1>test test test</h1>
  </div>
  
</div>

旁注：

图片max-width="100px" max-height="100px"不会像那样工作，它们应该像这样，内联，

style="max-width:100px;max-height:100px"

或外部，在CSS（推荐）

中

#overlayImg {
  width: 100%;
  max-width: 100px;
  max-height: 100px;
  height: auto;
  opacity: 1;
  -webkit-transition: all 4s;
  transition: all 0.5s;
  transition-timing-function: ease;
}