當鼠標指針懸停在其他元素位置時，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

包含覆蓋格中的內容

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