当鼠标指针悬停在其他元素位置时，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中的内容

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;