Simulate mouseenter with pure css-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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

div:hover {
  border-color: red;
}

<main>
  <article>
    <div id='myDiv'>

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

CodePudding user response：

Currently you are applying the :hover to all elements on the page by using the *-selector, you can read more about that here: https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

Make it more specific by selecting the div:

div:hover {
  /* your rules here */
}

CodePudding user response：

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 >

    </div>
    <div>

    </div>
    <div >

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

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

CodePudding user response：

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 >
      not me
    </div>
  </article>
  <article >
    <div>
      not me either, I am inside not-me
    </div>
    <div >
      not me
    </div>
  </article>
</main>
<main >
  nothing in here
  <article >
    <div>
      ME I want in also!
    </div>
    <div>
      ME!
    </div>
  </article>
  <article >
    <div>
      Me ME! I am inside not-me
    </div>
    <div >
      not me
    </div>
  </article>
</main>

CodePudding user response：

You can simply use this code:

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