CSS 鼠标指针悬停在其他元素位置时也有悬停效果

Question

我在 div.overlay 上有悬停效果，所以当悬停时，它会淡出然后淡入。但是，如果我悬停在 <span> 或 <h2> 上，背景不会更改，我正在努力寻找如何使 <a> 中的任何内容都悬停以产生相同的效果。有什么想法吗？

.homepage-box {
  position: relative;
  width: 300px;
  height: 300px;
}
.homepage-box h2 {
  margin-bottom: 0;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 14%;
  color: #ffffff;
  font-size: 2em;
  z-index: 3;
}
.homepage-box span.button {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 1.3em;
  border: 1px solid #fff;
  padding: 7px 20px;
  font-weight: bold;
  margin: 0 30%;
  z-index: 3;
}
.homepage-box img {
  margin: 0 0 10px 0;
  z-index: 1;
}
.homepage-box div.over {
  position: absolute;
  height: 191px;
  width: 100%;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  -webkit-transition: background-color 500ms linear;
  -moz-transition: background-color 500ms linear;
  -o-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}
.homepage-box div.over:hover,
.homepage-box a:hover ~ div.over,
.homepage-box h2:hover ~ div.over {
  background: rgba(0, 0, 0, 0);
}
.homepage-box a {
  color: #2B2B2C;
  margin: 0 0 15px 0;
  display: block;
}

<div class="homepage-box">
  <a href="#">
    <div class="over"></div>
    <h2>Baby Bean Bags</h2>
    <span class="button">shop now</span>
    <img src="/images/companies/1/baby-beanbags.jpg">
    <p>Perfect for a newborn baby &amp; makes a lovely gift to new parents. Cute, safe &amp; well designed baby beanbags.</p>
  </a>
</div>

Answer 1

包含覆盖内的内容div

.homepage-box {
  position: relative;
  width: 300px;
  height: 300px;
}
.homepage-box h2 {
  margin-bottom: 0;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 14%;
  color: #ffffff;
  font-size: 2em;
  z-index: 3;
}
.homepage-box span.button {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 1.3em;
  border: 1px solid #fff;
  padding: 7px 20px;
  font-weight: bold;
  margin: 0 30%;
  z-index: 3;
}
.homepage-box img {
  margin: 0 0 10px 0;
  z-index: 1;
}
.homepage-box div.over {
  position: absolute;
  height: 191px;
  width: 100%;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  -webkit-transition: background-color 500ms linear;
  -moz-transition: background-color 500ms linear;
  -o-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}
.homepage-box div.over:hover,
.homepage-box a:hover ~ div.over,
.homepage-box h2:hover ~ div.over {
  background: rgba(0, 0, 0, 0);
}
.homepage-box a {
  color: #2B2B2C;
  margin: 0 0 15px 0;
  display: block;
}

<div class="homepage-box">
  <a href="#">
    <div class="over">
    <h2>Baby Bean Bags</h2>
    <span class="button">shop now</span>
    <img src="/images/companies/1/baby-beanbags.jpg">
    <p>Perfect for a newborn baby &amp; makes a lovely gift to new parents. Cute, safe &amp; well designed baby beanbags.</p>
    </div>
  </a>
</div>

CSS 鼠标指针悬停在其他元素位置时也有悬停效果

CSS hover effect also when mouse pointer over other elements positions

html

css

hover