CODEWITHSUNDEEP
htmlcss
buydadip
buydadip

Reputation: 9437

hover over an embedded div and change another one

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?

Upvotes: 1

Views: 118

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106068

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.

Upvotes: 1

ssc-hrep3
ssc-hrep3

Reputation: 16099

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.

Upvotes: 2

Related Questions