When I hover over one div, I aim to alter the background color of another div, but unfortunately, the change

Question

When I hover over one div, I aim to alter the background color of another div, but unfortunately, the change

Is there a way to change the color of #bg when hovering over any div element with an id of symbol in a container?

<div id="container">
    <div id="symbol1"></div>
    <div id="symbol2"></div>
    <div id="symbol3"></div>
    <div id="symbol4"></div>
</div>
<div id="bg"></div>

I attempted to use the CSS selector below, but it did not work. I also tried using +, >, and just whitespace, with no success.

#symbol3:hover ~ #bg{
    background-color:red;
}

Unfortunately, this approach did not achieve the desired result.

html css

Answer 1

Answer №1

One efficient method to achieve this is by utilizing the :has() selector in combination with the target attribute selector [attribute*="value"]. This specific selector targets elements that contain a substring value within their specified attribute.

#bg {
  /* styling for #bg div */
  width: 100px;
  height: 100px;
  background-color: black;
}

#container:has([id*="symbol"]:hover) + #bg {
  background-color: red;
}

<div id="container">
  <div id="symbol1">1</div>
  <div id="symbol2">2</div>
  <div id="symbol3">3</div>
  <div id="symbol4">4</div>
</div>
<div id="bg"></div>

#container:has([id*="symbol"]:hover) + #bg

essentially looks for the presence of an #container element with an id containing the term symbol, while it is being hovered over, and subsequently selects the following #bg element.

For further information on CSS selectors, please refer to: w3schools CSS Selectors Reference

Answer 2

One efficient method to achieve this is by utilizing the :has() selector in combination with the target attribute selector [attribute*="value"]. This specific selector targets elements that contain a substring value within their specified attribute.

#bg {
  /* styling for #bg div */
  width: 100px;
  height: 100px;
  background-color: black;
}

#container:has([id*="symbol"]:hover) + #bg {
  background-color: red;
}

<div id="container">
  <div id="symbol1">1</div>
  <div id="symbol2">2</div>
  <div id="symbol3">3</div>
  <div id="symbol4">4</div>
</div>
<div id="bg"></div>

#container:has([id*="symbol"]:hover) + #bg

essentially looks for the presence of an #container element with an id containing the term symbol, while it is being hovered over, and subsequently selects the following #bg element.

For further information on CSS selectors, please refer to: w3schools CSS Selectors Reference

Answer 3

Answer №2

The problem with the code lies in what disinfor has mentioned.
By relocating the #bg div outside of, but before the #container div, you can implement the following solution.
The :has() selector targets a #bg element that is immediately followed by a #container element containing a hovered div#symbol3.
If altering the HTML structure isn't an option, it seems like JavaScript may be needed.

#bg:has(+ #container div#symbol3:hover) {
  background-color: red;
}

<div id="bg">0</div>
<div id="container">
  <div id="symbol1">1</div>
  <div id="symbol2">2</div>
  <div id="symbol3">3</div>
  <div id="symbol4">4</div>
</div>

Answer 4

The problem with the code lies in what disinfor has mentioned.
By relocating the #bg div outside of, but before the #container div, you can implement the following solution.
The :has() selector targets a #bg element that is immediately followed by a #container element containing a hovered div#symbol3.
If altering the HTML structure isn't an option, it seems like JavaScript may be needed.

#bg:has(+ #container div#symbol3:hover) {
  background-color: red;
}

<div id="bg">0</div>
<div id="container">
  <div id="symbol1">1</div>
  <div id="symbol2">2</div>
  <div id="symbol3">3</div>
  <div id="symbol4">4</div>
</div>

When I hover over one div, I aim to alter the background color of another div, but unfortunately, the change

Answer №1

Answer №2

Similar questions

Steer clear of utilizing CSS pseudo-elements like :before and :after

Tips for including HTML tags in strings without causing issues with nested tags

Spot the columns generated by CSS and incorporate a new column using JavaScript

JS switch for numerous container elements

Is the PNG image displaying poorly in the IE10 browser?

Determining the margin-left value of a centrally positioned table

Unable to Publish HTML File

Wagtail Django TableBlock not showing up properly on the webpage

Refresh a partial view in Rails using AJAX with JSON feedback

Submitting data with a checkbox and dropdown menu

The .css() method does not apply any styles to the elements in the document

Tips for implementing Wordwrap on List Items within a Flexbox Setup

Is it possible to set all UI forms to a readonly/disable mode?

Tips for displaying the initial slide when a tab is loaded on a multi-tab webpage

Struggling to locate the origin of this mysterious border

CSS. Absolute positioning in relation to a div element

The transparency of an image is being lost when it is used in a modal

Is it possible to scroll the grid horizontally?

Managing a PUT request received from an HTML form utilizing the Bottle framework

What is the best way to display items from top to bottom in React?