Asked  7 Months ago    Answers:  5   Viewed   33 times

I know that there does not exist a CSS parent selector, but is it possible to style a parenting element when hovering a child element without such a selector?

To give an example: consider a delete button that when hovered will highlight the element that is about to become deleted:

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

By means of pure CSS, how to change the background color of this section when the mouse is over the button?

 Answers

32

Well, this question is asked many times before, and the short typical answer is: It cannot be done by pure CSS. It's in the name: Cascading Style Sheets only supports styling in cascading direction, not up.

But in most circumstances where this effect is wished, like in the given example, there still is the possibility to use these cascading characteristics to reach the desired effect. Consider this pseudo markup:

<parent>
    <sibling></sibling>
    <child></child>
</parent>

The trick is to give the sibling the same size and position as the parent and to style the sibling instead of the parent. This will look like the parent is styled!

Now, how to style the sibling?

When the child is hovered, the parent is too, but the sibling is not. The same goes for the sibling. This concludes in three possible CSS selector paths for styling the sibling:

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

These different paths allow for some nice possibilities. For instance, unleashing this trick on the example in the question results in this fiddle:

div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}

Style parent image example

Obviously, in most cases this trick depends on the use of absolute positioning to give the sibling the same size as the parent, ánd still let the child appear within the parent.

Sometimes it is necessary to use a more qualified selector path in order to select a specific element, as shown in this fiddle which implements the trick multiple times in a tree menu. Quite nice really.

Tuesday, June 1, 2021
 
altermativ
answered 7 Months ago
34

Yes, it is possible - see this:

demo

.circle {
  position: relative;
  margin: 7em auto;
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background: lightblue;
}

.arc {
  overflow: hidden;
  position: absolute;
  /* make sure top & left values are - the width of the border */
  /* the bottom right corner is the centre of the parent circle */
  top: -1em;
  right: 50%;
  bottom: 50%;
  left: -1em;
  /* the transform origin is the bottom right corner */
  transform-origin: 100% 100%;
  /* rotate by any angle */
  /* the skew angle is 90deg - the angle you want for the arc */
  transform: rotate(45deg) skewX(30deg);
}

.arc:before {
  box-sizing: border-box;
  display: block;
  border: solid 1em navy;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  transform: skewX(-30deg);
  content: '';
}
<div class='circle'>
  <div class='arc'></div>
</div>
Thursday, June 3, 2021
 
SubniC
answered 7 Months ago
100

You can install the EF6 Designer for VS2012 from here and it will update the schema that validates config files.

Wednesday, August 11, 2021
 
Bruce
answered 4 Months ago
65

Yes it is via the new step-function easing curves property.

Instead of "ease-in" etc. use "step-start" or "step-end" which will make the transition happen instantaneously either at the beginning or end of the time period specified in transition-duration.

You can also have multiple steps: "steps(N, start | end ])" which will have the transition happen in equally spaced steps.

AFAIK this is only supported in Chrome to date.

Wednesday, August 25, 2021
 
xosp7tom
answered 4 Months ago
77

Depending on the current context of this, then this should work:

$(this).parent().find('.officeName').html();
Friday, November 19, 2021
 
Mushroomzier
answered 2 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share