Hovering over a div element will trigger a change in another embedded div

Question

Hovering over a div element will trigger a change in another embedded div

My HTML Code:

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

It is worth noting that the .home class is nested inside two divs; .menu and then .buttons. The .titleHome display property is set to none. The objective is to change the display to block for .titleHome when hovering over .home using pure CSS. The challenge lies in understanding the correct rules to accomplish this.

If an element with ID #b follows #a in the HTML structure, the + selector can be employed.

Similarly, when there are elements in between, the ~ selector is relevant.

However, it is unclear if these rules directly apply to the nested class .home. Attempts using the ~ selector have been unsuccessful.

Seeking guidance on a viable approach to achieve this effect. Can anyone provide a sample solution for this scenario?

html css

Answer 1

Answer №1

Currently, CSS provides only 3 connecting selectors: + to target the immediate next sibling, ~ for any next sibling, and > to target a child. It is not possible to select the parent element directly with CSS, so going up one level and then targeting the next element is not achievable.

To meet your requirements without altering the HTML structure, you can utilize JavaScript. Alternatively, you can adjust the HTML layout so that the element needing a different style is positioned on the same level as, or after, the hovered element.

Answer 2

Currently, CSS provides only 3 connecting selectors: + to target the immediate next sibling, ~ for any next sibling, and > to target a child. It is not possible to select the parent element directly with CSS, so going up one level and then targeting the next element is not achievable.

To meet your requirements without altering the HTML structure, you can utilize JavaScript. Alternatively, you can adjust the HTML layout so that the element needing a different style is positioned on the same level as, or after, the hovered element.

Answer 3

Answer №2

Just a heads up, although it may not be directly relevant here, setting pointer-events to none on parent elements and to auto on child elements could potentially solve the issue:

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

It could be useful for a simple interaction and basic design with caution.

It might also be handy for a demonstration or quick test (prior to writing a script), just remember to remove or comment out the rules afterwards.

Answer 4

Just a heads up, although it may not be directly relevant here, setting pointer-events to none on parent elements and to auto on child elements could potentially solve the issue:

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

It could be useful for a simple interaction and basic design with caution.

It might also be handy for a demonstration or quick test (prior to writing a script), just remember to remove or comment out the rules afterwards.

Hovering over a div element will trigger a change in another embedded div

Answer №1

Answer №2

Similar questions

Is it possible to create a WebXR using the ARCore API specifically for IOS devices?

Using the onClick function to set attributes in React JS

What is the best method to retrieve particular HTML lines (containing a flex container) with IronPython?

The absence of the iframe in ie8 is causing problems that cannot be fixed with relative positioning

Learn how to dynamically highlight a table row when any changes are made to it using jQuery

"Composing perfect sentences: The art of incorporating quotes

Users report text-shadow not working in Opera browser

Issue with Slick Slider when expanding collapsible section in Bootstrap 4

Why do images show up on Chrome and Mozilla but not on IE?

Issues with animation functionality in Google Chrome

When the value is removed, it does not revert back to the initial filtered choices

The Vue instance methods provide a way to access and manipulate formatted properties

Position the button at the corner of the textarea

Only apply the CSS filter alpha to the parent element and not its children

Shape with smoothed corners

VS Code warning about unused CSS selectors in SvelteKit

The hamburger menu appears to be missing when viewing in Safari, while it functions properly on both Chrome and Firefox browsers

Retrieve the width of a fixed div element based on the parent element's width, set

What are some ways I can troubleshoot my contact form?

Tips for incorporating border/outline/stroke into SVG elements using CSS