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

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Putting off the execution of a setTimeout()

I'm encountering difficulties with a piece of asynchronous JavaScript code designed to fetch values from a database using ajax. The objective is to reload a page once a list has been populated. To achieve this, I attempted to embed the following code ...

javascriptajaxhtml

Ways to sum up the values within a JSON object

Currently, I am using an AJAX call to fetch JSON data from an API. My goal now is to add up all the visits. This is what I have implemented so far. Any suggestions on how I can achieve that? $(document).ready(function() { var X = []; var Y = []; var d ...

javascriptjqueryhtmljsonajax

Struggling to position a div below another div within a flex box layout

When trying to make the Information & advice header appear above the other div elements, I encountered an issue with flexbox. Despite setting the container div to have a flex direction of column, the header div continued to align to the left of the oth ...

htmlcssangularflexbox

Conquering challenges arising from organizing subdirectories for js/css/xml files

During the process of developing a website with html, css, js and xml files stored on my computer (not yet online), I initially kept all the files in one folder along with an images folder. However, as the project progressed and things started to get mes ...

javascripthtmlcssxml

What is the significance of an empty href attribute in the HTML <base> tag?

If my website URL is: http://example.com/path/to/dir/index.html And I decide to proxy this page through: http://proxyserver.com/path/to/dir/index.html. I would like all relative URLs on the page to be resolved by proxyserver.com instead of example.com. Wh ...

htmlangularbase-tag

Angular 4's Panel Window: A User-Friendly Interface

Having experience with Adobe Flex, I am familiar with creating new panel windows in Action Script by using the 'new' keyword and popping them up using popups. The customization of these windows was achieved through functions provided in the Panel ...

javascripthtmlangularjs

By utilizing the <tr> element, one can enhance the border thickness by 1 pixel

Is it possible to ensure that row selection in a table is consistent in terms of border alignment on both sides? https://i.stack.imgur.com/qmZiQ.png If you have any suggestions or solutions, please share them. Thank you! table { margin: 10px; bord ...

htmlcsshtml-tableborder

Can we incorporate modulo into the loop?

I have a JavaScript function with HTML code inside. I need the ".one-card" div to repeat four times within each ".row" div. The ".row" div is being repeated in a foreach loop. I want to check if the result of modulo (4) is not equal to zero, then display t ...

javascripthtmlmodulo

Display logo when website has been scrolled

On my website, I want to display a logo in the header only when the site has been scrolled. I attempted to accomplish this with JavaScript: if(document.getElementById("div").scrollTop != 0){ document.write("<img src='logo.jpg'>"); } How ...

javascriptcss

forming a boundary that stands alone, unattached to any other boundaries

I am trying to design a navigation bar that resembles the one depicted in the image provided. The concept involves creating a navigation bar where each border is separated from the others, potentially achieved using hr tags. However, I am struggling to fi ...

htmlcssborder

I'll show you how to implement custom fonts in TailwindCSS and NuxtJS!

Currently, I am in the process of developing a website using NuxtJS along with Tailwind CSS for styling. To incorporate my desired fonts, I have utilized the @nuxtjs/tailwindcss module. Despite applying the correct font-family through CSS, it seems that m ...

cssvue.jsfontstailwind-cssnuxtjs

Show brief tags all on one line

This image showcases the functionality of the site, specifically in the "Enter a code" column where users can input data using TagsInput. I am seeking to enhance this feature by ensuring that shorter tags are displayed on a single line. While I am aware th ...

javascriptcssreactjsbootstrap-tags-input

Reposition icons accordingly while incorporating a new set of icons

After creating a new icon set font, I noticed that the icons are not positioning correctly and appear smaller than expected when loaded: https://i.stack.imgur.com/1OsAL.png https://i.stack.imgur.com/zmLQq.png I attempted to adjust the .icon class by add ...

css

Images are not displayed when utilizing font-awesome on a MVC 5 website

I'm having an issue where adding font-awesome to the style bundle is causing images not to display correctly. Instead of showing the right icon, I am getting a transparent box. My style bundle configuration looks like this: bundles.Add(new StyleBund ...

csstwitter-bootstrapasp.net-mvc-5font-awesome

Issues arise when setting a delay for CSS transitions to occur due to the

I'm trying to create a scroll bar that only appears when hovered over, similar to how it works on Facebook where the scroll bar shows up slowly instead of all at once. I've tried using CSS transition delay, but it doesn't seem to be working ...

htmlcss

How do you determine the dimensions of a background image?

My div is a perfect square, measuring 200 pixels by 200 pixels. The background image I've chosen to use is larger at 500 pixels by 500 pixels. I'm searching for a method to ensure that the entire background image fits neatly within the confines ...

htmlcssbackground

Having trouble with changing the selected value in JQuery?

I'm attempting to use jQuery to set the select option, but I'm encountering an issue. It is setting the value properly, but the text is not being updated. I've experimented with .prop('selected',true), .attr('selected',t ...

jqueryhtml

Having trouble rendering components due to conflicts between React Router and Semantic UI React

Below is the code in my App.js: import { useRecoilValue } from 'recoil'; import { authState } from './atoms/authAtom'; import { ToastContainer } from 'react-toastify'; import { ProtectedRoute } from './layout/ProtectedRou ...

javascriptcssreactjssemantic-ui-react

Gain command over the underline style of text without relying on the border property

Ingredients: just a simple text input field. Question: Is there a way to customize the size, color, and position of the underline styling on an input tag? I noticed that the property text-decoration-color is supported in the moz browser engine, but I&apos ...

htmlcss

Is there a way to programmatically click on an href link in Firefox? The method that is typically used in Internet Explorer

http://jsfiddle.net/HVGre/1/ - check out this test link. I have a link in my HTML code that needs to be clickable dynamically. While it functions well with the .click() method in Internet Explorer, it fails in Firefox. Unfortunately, changing the link to ...

javascriptjqueryhtmlfirefox