Simulate mouseenter with pure css

user_419425 0
Viewed 164

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;
}

enter image description here

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?

css html javascript
7 Answers

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/

enter image description here

user_6606940

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;
}
user_181812460

Update your CSS (demo):

div:hover {
    border-color: red;
}

Alternatively, add a class to elements you want to share a common style (demo).

<main>
  <article>
    <div class="highlight-on-hover">

    </div>
    <div>

    </div>
    <div class="highlight-on-hover">

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

.highlight-on-hover:hover {
    border-color: red;
}
user_28693320 

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

div:hover {
  border-color: red;
}
<main>
  <article>
    <div id='myDiv'>

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

user_119144910

Just taking a guess with the ambiguous question example. You can say what NOT to style as well. You said "all" with *:hover so it does that.

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

*:hover:not(.not-me) {
  border-color: red;
}

main:hover:not(.not-me) {
  border-color: green;
}

article:hover:not(.not-me) {
  border-color: blue;
}

main>article>div:hover:not(.not-me) {
  border-color: inherit;
  border-color: orange;
  background-color: #ffdddd;
}

main.not-me:hover:not(*),
main.not-me *.not-me *:hover:not(*) {}
<main>
  <article>
    <div>

    </div>
    <div class="not-me">
      not me
    </div>
  </article>
  <article class="not-me">
    <div>
      not me either, I am inside not-me
    </div>
    <div class="not-me">
      not me
    </div>
  </article>
</main>
<main class="not-me">
  nothing in here
  <article class="not-me">
    <div>
      ME I want in also!
    </div>
    <div>
      ME!
    </div>
  </article>
  <article class="not-me">
    <div>
      Me ME! I am inside not-me
    </div>
    <div class="not-me">
      not me
    </div>
  </article>
</main>

user_1259810
user_39861080

You can simply use this code:

$("main, article, div").hover(function () {
      $(this).parent().css('border-color', 'lightgrey');
}, function () {
      $(this).parent().css('border-color', '');
});
user_159978810
Related