So my problem is that I want to change my <div>
background-color and my <h4>
to red
, either I mouse in a <div>
or <h4>
.
This is my html (without unnecessary classes).
<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>
So I've been trying to apply h4:hover {color: red}
then I wanted to target also also my <div>
while hovering <h4>
, but there is no something like "parent selector" to target my div. So how can i do this? (I don't want to wrap either <div>
and <h4>
with <a>
tag).
Thanks!
First of all you need a class on your outer-most div in order to be able to directly reference this without also referencing the "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>
Then you can call:
.mydiv:hover div {
background-color:red;
}
.mydiv:hover h4 {
color:red;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.