Modify the color of a sub division's background using CSS when hovering over

Question

Modify the color of a sub division's background using CSS when hovering over

As I work on this Fiddle, my goal is to change the background of each div section individually when moused over. However, currently, hovering over one section triggers the background change for all sections. Is there a way to ensure that only the specific section being hovered over changes its background? For example, when I hover over `.two`, I want only `.two` to be affected and not `.one`. How can I achieve this?

CSS:

div.one:hover, div.two:hover, div.three:hover{
    background-color: #69aeea;
}

HTML:

<div class="one">
    Text 1
    <div class="two">
        Text 2
        <div class="three">Text 3</div>
        <div class="three">Text 3</div>
        <div class="three">Text 3</div>
    </div>
    <div class="two">
        Text 2
        <div class="three">Text 3</div>
        <div class="three">Text 3</div>
        <div class="three">Text 3</div>
    </div>
</div>

html css

Answer 1

Answer №1

:hover is activated all the way up to the main parent (usually <body>), which means you cannot activate it solely on the child element if you have :hover states set on the parent element.

To achieve this, you need to separate the specific elements where you want the hover effect to be visible. In this case, I achieved this by enclosing the text in a <span> tag. This ensures that the hover state remains contained within that particular child of the parent element.

<div class="one">
  <span>Text 1</span>
  <div class="two">
    <span>Text 2</span>
    <div class="three"><span>Text 3</span></div>
...

Then you can target these specifically in the CSS using the direct descendent selector: (The > character selects a direct descendent of a parent)

div > span:hover {
  background-color: #69aeea;
}

You can also apply different colors based on the level like this:

div.one > span:hover {
  background-color: #69aeea;
}
div.two > span:hover {
  background-color: #ae69ea;
}
div.three > span:hover {
  background-color: #aeea69;
}

DEMO: http://jsfiddle.net/shshaw/8uetm/

Answer 2

:hover is activated all the way up to the main parent (usually <body>), which means you cannot activate it solely on the child element if you have :hover states set on the parent element.

To achieve this, you need to separate the specific elements where you want the hover effect to be visible. In this case, I achieved this by enclosing the text in a <span> tag. This ensures that the hover state remains contained within that particular child of the parent element.

<div class="one">
  <span>Text 1</span>
  <div class="two">
    <span>Text 2</span>
    <div class="three"><span>Text 3</span></div>
...

Then you can target these specifically in the CSS using the direct descendent selector: (The > character selects a direct descendent of a parent)

div > span:hover {
  background-color: #69aeea;
}

You can also apply different colors based on the level like this:

div.one > span:hover {
  background-color: #69aeea;
}
div.two > span:hover {
  background-color: #ae69ea;
}
div.three > span:hover {
  background-color: #aeea69;
}

DEMO: http://jsfiddle.net/shshaw/8uetm/

Answer 3

Answer №2

Regrettably, CSS does not allow direct access to the parent element from a child element. This means that you cannot change the background of a parent element when hovering over its child element. In order to accomplish this, you will need to utilize javascript.

Answer 4

Regrettably, CSS does not allow direct access to the parent element from a child element. This means that you cannot change the background of a parent element when hovering over its child element. In order to accomplish this, you will need to utilize javascript.

Modify the color of a sub division's background using CSS when hovering over

Answer №1

Answer №2

Similar questions

Javascript data table pagination and custom attributes resulting in unexpected truncation of strings

The hideCol method does not work on jqGrid

Choosing a hyperlink within a cell depending on the surrounding text in that cell

Discovering the specific element that was clicked from a collection of elements

What is the best way to generate page elements in AngularJS when the total number of pages is already known?

Automatic button rotation

Break the line after every space in words within an element

When attempting to overlay CSS text onto an image, the text appears to be hiding behind the

Why is my CSS media query failing to increase font size?

Perform a bash command using PHP when an HTML button is clicked

Is it possible to create HTML tables without including paragraphs within the cells using docutils rst2html?

What is the process of importing an HTML template into a Vue.js project?

Implementing a Standardized Template for Consistent Design and styling Throughout Website

How to align text to the bottom of a div using CSS

Enhance the numerical worth of the variable through the implementation of the function

Adjust the href attribute of a link dynamically using the value input from a text field immediately

What is the method to create a button that links to a page when selected using a radio button?

What is the best way to generate a table with continuously updating content?

To view the element when the browser is not in full screen mode, the body overflow (both horizontally and vertically) can be used instead of resizing

Having trouble locating elements with Selenium in Java?