hover over an embedded div and change another one

Question

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?

See [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Jed Fox, Dec 20 '15 at 22:01
I think you should first get all the elements in an object, and then change the one you need. — Franco, Dec 20 '15 at 22:05

score 2 · Accepted Answer · answered Dec 20 '15 at 22:14

At the moment, there are only 3 connecting selectors in CSS: + for the immediate next sibling, ~ for any next sibling and > for a child. You cannot access the parent element with plain CSS. Therefore you cannot go one level up and to the next element.

You can use JavaScript to achieve your requirements without changing your HTML. You can also adapt your HTML and have the element, which needs to have another style on the same level as (and after) the hovered element.

score 1 · Answer 2 · answered Dec 21 '15 at 00:19

for info, but not usefull at all here, pointer-events to none on adjacent and to auto on childs could do the trick here:

#menu {
  pointer-events: none;
  padding: 1em;
}
.buttons button.home {
  pointer-events: auto;
  cursor: pointer;
  margin: 1em;
}
.titleHome {
  display: none;
}
#menu:hover + .titleHome {
  display: block;
}

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

for one single interaction and basic styling it could be used with care.

for demo or quick test (before writing a script) it can help too ... just do not forget to erase or comment the rules.

hover over an embedded div and change another one

2 Answers2