Does the Parent Tag style override the child tag style when hovering?

Question

Does the Parent Tag style override the child tag style when hovering?

I am currently dealing with some style issues. How can I apply the styling of the parent tag to the child tag when hovering over it? Let's illustrate this with a simple example.

.outer:hover {
  background: yellow;
  z-index: 1;
  position: relative;
}

.inner {
  background: red;
  position: relative;
}

<div class="outer">
  <div class="inner">Something</div>
</div>

Desired outcome: By default, the background is red (as per the inner class), but upon hovering, I want it to change to the styling of the parent tag (with the outer class and a background color of yellow).

The outer and inner classes must remain within those specific tags. http://jsfiddle.net/P7c9q/2209/

html css

Answer 1

Answer №1

Try implementing CSS variables:

.outer:hover {
  background: yellow;
  --c:transparent;
}

.inner {
  background: var(--c,red);
}

<div class="outer">
  <div class="inner">Something</div>
</div>

Alternatively, you can use the inherit property:

.outer:hover {
  background: yellow;
}
.outer:hover .inner {
  background:inherit;
}

.inner {
  background: red;
}

<div class="outer">
  <div class="inner">Something</div>
</div>

Answer 2

Try implementing CSS variables:

.outer:hover {
  background: yellow;
  --c:transparent;
}

.inner {
  background: var(--c,red);
}

<div class="outer">
  <div class="inner">Something</div>
</div>

Alternatively, you can use the inherit property:

.outer:hover {
  background: yellow;
}
.outer:hover .inner {
  background:inherit;
}

.inner {
  background: red;
}

<div class="outer">
  <div class="inner">Something</div>
</div>

Answer 3

Answer №2

To create a unique style for the :hover selector, utilize the :not selector along with the parent style overridden by child elements .inner:not(:hover). The element will display its own child style when not being hovered over and switch to the parent style upon hovering.

Answer 4

To create a unique style for the :hover selector, utilize the :not selector along with the parent style overridden by child elements .inner:not(:hover). The element will display its own child style when not being hovered over and switch to the parent style upon hovering.

Does the Parent Tag style override the child tag style when hovering?

Answer №1

Answer №2

Similar questions

Unusual HTML Structure (content misplaced or out of order?)

The AngularJS component materializes almost instantaneously

Pagination of AJAX result on the client side using jQuery

Executing functions with directive controllers

How can I show the remaining paragraph text upon clicking a button in a responsive manner using CSS and JavaScript?

Exploring the Potential of JSP in Form Submissions

Issue with OBJLoader showing a blank screen

Using the <audio> tag in HTML5 on Android devices

What is preventing jQuery 3 from recognizing the '#' symbol in an attribute selector?

What is the reason behind the observation of executed javascript upon receiving a JSON response from the server?

Element sticking on scroll down and sticking on scroll up movements

Is there a way to exclusively show the browser name and version while excluding any supplementary details with 'HTTP_USER_AGENT'?

Form with missing input fields submits nothing to the server

CSS transitions/transforms are failing to impact the necessary elements

The external Jquery file is being successfully loaded, however, the Jquery functions are failing to execute

What is the best way to insert a triangle shape to the bottom of a div with an opacity level set at 0.2

Guide on triggering a function with the Enter key in Angular 9

White space in Bootstrap 4 grid caused by a full-width row

Comparing Django forms to conventional forms

Guiding user to their destination after signing in