Here is my html:
<div id="menu">
<div class="arrows">
<div class="arrow-down"></div>
</div>
<div class="buttons">
<button class="home">Home</button>
<button class="about">About</button>
</div>
</div>
<div class="titleHome">
<p1>Home</p1>
<div id="bubble"></div>
<div id="tri"></div>
</div>
Notice that .home
is embedded within 2 divs; .menu
and then .buttons
. The display of .titleHome
is none
. I want to change the display to block
for .titleHome
when hovering over .home
using pure css. The problem is I don't know the rules for doing so.
I know that if #b
is after #a
in the HTML then we can use +
.
I also know that if there are elements in between we can use ~
.
But do these rules apply to .home
because it is embedded within other divs. I tried using ~
but with no success.
Can someone please give me a sample as to how to do this?