How to style the parent element when hovering a child element

Question

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    lt div gt       lt p gt Lorem ipsum     lt  p gt       lt button gt Delete lt  button gt   lt  div gt    By means of pure CSS  how to change the background color of this section when the mouse is over the button

User · Answer

there is no CSS selector for selecting a parent of a selected child   you could do it with JavaScript

User · Answer

A simple jquery solution for those who don t need a pure css solution    x000D   x000D          letter   hover function     x000D          this  closest   word   toggleClass  hovered   x000D          x000D   hovered   x000D    background-color  lightblue  x000D    x000D   x000D   letter   x000D    margin  20px  x000D    background  lightgray  x000D    x000D   x000D   letter hover   x000D    background  grey  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div id  word  gt  x000D     lt div class  letter  gt T lt  div gt  x000D     lt div class  letter  gt E lt  div gt  x000D     lt div class  letter  gt S lt  div gt  x000D     lt div class  letter  gt T lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

As mentioned previously  quot there is no CSS selector for selecting a parent of a selected child quot   So you either   use a CSS hack as described in NGLN s answer use javascript - along with jQuery most likely   Here is the example for the javascript jQuery solution On the javascript side      my-id-selector-00   on  mouseover   function        this  parent   addClass  is-hover       on  mouseout   function        this  parent   removeClass  is-hover        And on the CSS side  you d have something like this   is-hover     background-color  red

User · Answer

Another  simpler approach  to an old question    would be to place elements as siblings and use     Adjacent Sibling Selector      or  General Sibling Selector       lt div id  parent  gt     lt  -- control should come before the target    think  cascading    -- gt     lt button id  control  gt Hover Me  lt  button gt     lt div id  target  gt I m hovered too  lt  div gt   lt  div gt     parent     position  relative    height  100px        Move button control to bottom      control     position  absolute    bottom  0      control hover    target     background  red        Demo Fiddle here

User · Answer

I know it is an old question  but I just managed to do so without a pseudo child  but a pseudo wrapper     If you set the parent to be with no pointer-events  and then a child div with pointer-events set to auto  it works   Note that  lt img gt  tag  for example  doesn t do the trick  Also remember to set pointer-events to auto for other children which have their own event listener  or otherwise they will lose their click functionality    x000D   x000D  div parent     x000D      pointer-events  none  x000D    x000D   x000D  div child   x000D      pointer-events  auto  x000D    x000D   x000D  div parent hover   x000D      background  yellow  x000D        x000D   lt div class  parent  gt  x000D    parent - you can hover over here and it won t trigger x000D     lt div class  child  gt hover over the child instead  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Edit  As Shadow Wizard kindly noted  it s worth to mention this won t work for IE10 and below   Old versions of FF and Chrome too  see here

User · Answer

This is extremely easy to do in Sass   Don t delve into JavaScript for this   The  amp  selector in sass does exactly this   http   thesassway com intermediate referencing-parent-selectors-using-ampersand

User · Answer

This solution depends fully on the design  but if you have a parent div that you want to change the background on when hovering a child you can try to mimic the parent with a   after     before    lt div class  item  gt      design  lt span class  icon-cross  gt x lt  span gt   lt  div gt    CSS     item       background  blue      border-radius  10px      position  relative      z-index  1     item span icon-cross hover  after       background  DodgerBlue      border-radius  10px      display  block      position  absolute      z-index  -1      top  0      left  0      right  0      bottom  0      content          See a full fiddle example here

User · Answer

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    lt parent gt       lt sibling gt  lt  sibling gt       lt child gt  lt  child gt   lt  parent gt    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      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

[html] How to style the parent element when hovering a child element?

Examples related to html

Examples related to css