Can an element be targeted for hover in CSS without it being a child element?

Question

Can an element be targeted for hover in CSS without it being a child element?

In my HTML code, I have an <aside> and a <header>. The <header> contains a child element called container, which has some children including one named burger bar. What I am trying to achieve is that when I hover over the burger bar element, I want the <aside> element to become visible. I've attempted to accomplish this using the CSS selector

header .container .burger_bar:hover + aside

, but since the aside is not positioned adjacent to the burger bar in the HTML structure, this method does not work as intended.

Furthermore...


<div class='header'> 
    <div class='container'>
         <div class='burger_bar'>...</div>
    </div>
</div>

<aside>...</aside> /* <---when hovering the burger bar this will be 
transform: translate(0%) right after being transform: translate(-100%) */

javascript html css css-selectors

Answer 1

Answer №1

To select the target element when both trigger and target are at the same level, you can utilize the CSS selector .trigger:hover ~ .target while hovering over the .trigger.

.trigger:hover ~ .target {
  color: green;
}

<div class="trigger">Hover Me</div>
<div class="target">Target</div>

If your trigger and target are not on the same level, it is recommended to use JavaScript to dynamically add a class to your target.

const trigger = document.querySelector('.trigger');
const target = document.querySelector('.target');

trigger.addEventListener('mouseover', () => {
  target.classList.add('active');
});

trigger.addEventListener('mouseleave', () => {
  target.classList.remove('active');
});

.target.active {
  color: green;
}

<div class="parent1">
  <div class="trigger">Hover Me</div>
</div>
<div class="parent2">
  <div class="target">Target</div>
</div>

Alternatively, you may consider using the :has() pseudo-class, but note that its support is limited (currently only works in Safari).

.parent1:has(.trigger:hover) ~ .parent2 .target {
  color: green;
}

<div class="parent1">
  <div class="trigger">Hover Me</div>
</div>
<div class="parent2">
  <div class="target">Target</div>
</div>

Answer 2

To select the target element when both trigger and target are at the same level, you can utilize the CSS selector .trigger:hover ~ .target while hovering over the .trigger.

.trigger:hover ~ .target {
  color: green;
}

<div class="trigger">Hover Me</div>
<div class="target">Target</div>

If your trigger and target are not on the same level, it is recommended to use JavaScript to dynamically add a class to your target.

const trigger = document.querySelector('.trigger');
const target = document.querySelector('.target');

trigger.addEventListener('mouseover', () => {
  target.classList.add('active');
});

trigger.addEventListener('mouseleave', () => {
  target.classList.remove('active');
});

.target.active {
  color: green;
}

<div class="parent1">
  <div class="trigger">Hover Me</div>
</div>
<div class="parent2">
  <div class="target">Target</div>
</div>

Alternatively, you may consider using the :has() pseudo-class, but note that its support is limited (currently only works in Safari).

.parent1:has(.trigger:hover) ~ .parent2 .target {
  color: green;
}

<div class="parent1">
  <div class="trigger">Hover Me</div>
</div>
<div class="parent2">
  <div class="target">Target</div>
</div>

Can an element be targeted for hover in CSS without it being a child element?

Answer №1

Similar questions

Access the file using NodeJS and SailsJS for download

Counting the occurrence of a specific class within an element using jQuery

Split an array of simple data types in JavaScript into separate sections

Organizing outcomes from a for each function into an array using javascript

Expansive dropdown in Bootstrap 5

What is the process for uploading an image to Postman with Express.js?

Identifying text within a paragraph using JavaScript regex, excluding any URLs mentioned

Forces of Attraction and Repulsion in Three.js/Physijs: Exploring the Dynamics of Object

Working with Firebase cloud functions: Updating nodes

Troubleshooting problems with text areas in Android when using JQueryMobile and PhoneGap

Uploading my application on multiple servers after making changes using AngularJS and PHP

What's preventing me from using the left click function on my published blog post?

Swapping objects from Blender to Three.js using BlenderSwap

The jQuery extension for XDomainRequest in the $.ajax function called onprogress is

How to align two <select> elements side by side using Bootstrap

What is the process for customizing a form in the "add event" feature of wdCalender?

Retrieve input field values using the jQuery Taggd plugin in edit mode

Restricting character count when displaying output in JavaScript

Access the reset button on a dynamic image using the document.getElementById method

Seamless Exploration with Google StreetView