Simulate mouseenter with pure css

Question

I need to style an element when I hover with the mouse above it. But, I don't want to style its parent DOM elements. However, when I use :hover the element in question is styled just as I want, but unfortunately, all of its parents are styled too

*:hover {
    border-color: red;
}

DEMO

main,
article,
div {
  border: 1px solid lightgrey;
  padding: 30px;
}

*:hover {
  border-color: red;
}

<main>
  <article>
    <div>

    </div>
  </article>
</main>

The outer border shall be red only if the cursor is between the outer border and the middle border. The middle order shall be red only if the cursor is between the middle border and the inner border. The inner border shall be red only if the cursor is inside the inner border.

Is there a way to only style the DOM element being hovered (which can be any element)? or can I only achieve this goal with javascript?

Answer 1

You can't avoid the parent :hover with pure CSS today. There are quite a few topics on SO discussing this:

How to apply child:hover but not parent:hover

Safari has introduced support for a :has parent selector, and might solve this if other browsers support it as well. But it's still not a viable option today.

You asked if you can achieve this with javascript, and yes you can hack a solution in javascript using mouseenter and mouseleave events, toggling a CSS class.

https://jsfiddle.net/sq1kcwdt/4/

Answer 2

Actually, it's possible with some tricks using ::before or ::after. You can use these pseudo-elements to cover up the borders you want. It's important to use pointer-events: none; on these elements, so they won't disturb anything, they are just there for decoration.

However, my opinion is that javascript is more effective in this use case.

Here is a quick solution you can check out: https://codepen.io/serazoltan/pen/WNXOREq

It needs a lot of updates for general use, but I've made it just to show it's possible.

:root {
  --general-padding: 30px;
  --general-padding-neg: -33px;
}

main,
article,
div {
  border: 1px solid lightgrey;
  padding: var(--general-padding);
  position: relative;
  transition: all .3s;
}

main {
  height: 400px;
  z-index: 0;
}

article {
  height: 200px;
  z-index: 10;
}

div {
  height: 80px;
  z-index: 20;
}

main:hover {
  border-color: red;
}

article:hover {
  border-color: red;
}

article:hover::after {
  content: "";
  position: absolute;
  top: var(--general-padding-neg);
  left: var(--general-padding-neg);
  width: calc(100% + var(--general-padding)*2 + 4px);
  height: 460px;
  border: 1px solid lightgrey;
  pointer-events: none;
}

div:hover {
  border: 1px solid red;
  z-index: 20;
}

div:hover::after {
  content: "";
  position: absolute;
  top: var(--general-padding-neg);
  left: var(--general-padding-neg);
  width: calc(100% + var(--general-padding)*2 + 4px);
  height: 260px;
  border: 1px solid lightgrey;
  pointer-events: none;
}