affect parent element by hover on child

Question

Let's say I have smthg like that:

<div class="bigWrap">
    <div class="element">
        ...
        <div class="HoverThisElement"></div>
        ...
    </div>
    <div class="element">
        ...
        <div class="HoverThisElement"></div>
        ...
    </div>
    <div class="element">
        ...
        <div class="HoverThisElement"></div>
        ...
    </div>
</div>

And I need to affect .element when his child .HoverThisElement is hovered. Can I do that? Please give example with SASS if it's possible

score 2 · Answer 1 · answered Aug 20 '19 at 07:43

Like "little_coder" said you can trick this.

But when you want to support IE10 (no pointer-events support) you can just use an overlay DIV and target it with the sibling selector (You could use a pseudo element, too).

.overlay {
    position: absolute;
    background-color: red;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    transition: all .3s;
}

.HoverThisElement {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: yellow;
    z-index: 3;

    &:hover {
        + .overlay {
            right: 200px;
        }
    }
}

https://codepen.io/herrfischer/pen/xxKEjqR

little_coder · Accepted Answer · 2019-08-20T07:30:48.473

I have a workaround using CSS using pointer-events. This might help.

.element {
  background: red;
  padding: 10px;
  margin: 10px;
  pointer-events: none;
}

.HoverThisElement {
  background: yellow;
  padding: 15px;
  pointer-events: auto;
}

.element:hover {
  background: green; //add some styles you want to parent element
}

<div class="bigWrap">
  <div class="element">

    <div class="HoverThisElement"></div>

  </div>
  <div class="element">

    <div class="HoverThisElement"></div>

  </div>
  <div class="element">

    <div class="HoverThisElement"></div>

  </div>
</div>

score -1 · Answer 3 · answered Aug 20 '19 at 07:12

-1

There's no way to do that in CSS because there are no parent selectors in CSS.

If you really need to do that, the only way is to use JavaScript

answered Aug 20 '19 at 07:12

Logan Blangenois

375
1
10

score -1 · Answer 4 · answered Aug 20 '19 at 07:21

-1

As Logan said there is not parent selector, you need to do the following: on "HoverThisElement" mouse in add class active to closest "element", on mouse out remove active class

answered Aug 20 '19 at 07:21

red

1,334
6
25

affect parent element by hover on child

4 Answers4