HTML和CSS，父選擇器？

Question

所以我的問題是我想將<div>背景色和<h4>更改為red ，或者將鼠標放在<div>或<h4> 。

這是我的html（沒有不必要的類）。

<div>
    <a href="#"><div><span class="icon-bubbles3"></span></div></a>
    <a href="#"><h4>News</h4></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

因此，我一直在嘗試應用h4:hover {color: red}然后我也想在懸停<h4>時也定位我的<div> <h4> ，但是沒有像“父選擇器”這樣的目標定位我的div。 那我該怎么辦呢？ （我不想用<a>標簽包裝<div>和<h4> ）。

謝謝！

Answer 1

首先，您需要在最外面的div上創建一個類，以便能夠直接引用該類，而不必同時引用“ inner div”：

<div class="mydiv">
    <a href="#"><div><span class="icon-bubbles3"></span></div></a>
    <a href="#"><h4>News</h4></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

然后，您可以致電：

.mydiv:hover div {
   background-color:red;
}
.mydiv:hover h4 {
   color:red;
}