用纯 css 模拟 mouseenter

Question

当我将鼠标悬停在元素上方时，我需要为其设置样式。但是，我不想为其父 DOM 元素设置样式。但是，当我使用:hover 时，有问题的元素的样式就像我想要的那样，但不幸的是，它的所有父元素也都被样式化了

*:hover {
    border-color: red;
}

DEMO

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

*:hover {
  border-color: red;
}

<main>
  <article>
    <div>

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

只有当光标在外边框和中间边框之间时，外边框才会是红色的。仅当光标位于中间边框和内边框之间时，中间顺​​序才应为红色。仅当光标位于内边框内时，内边框才会为红色。

有没有办法只设置被悬停的 DOM 元素的样式（可以是任何元素）？还是我只能用 javascript 来实现这个目标？

Answer 1

今天你无法用纯 CSS 避免父 :hover。 SO上有很多话题讨论这个：

How to apply child:hover but not parent:hover

Safari 引入了对 :has 父选择器的支持，如果其他浏览器也支持它，可能会解决这个问题。但今天它仍然不是一个可行的选择。

您问是否可以使用 javascript 实现此目的，是的，您可以使用 mouseenter 和 mouseleave 事件在 javascript 中破解解决方案，切换 CSS 类。

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

Answer 2

实际上，使用::before 或::after 可以使用一些技巧。您可以使用这些伪元素来掩盖您想要的边框。使用指针事件很重要：无；在这些元素上，所以它们不会打扰任何东西，它们只是用来装饰的。

不过，我的看法是 javascript 在这个用例中更有效。

您可以查看以下快速解决方案： https://codepen.io/serazoltan/pen/WNXOREq

它需要大量更新以供一般使用，但我这样做只是为了表明它是可能的。

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

Answer 3

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

div:hover {
  border-color: red;
}

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

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

Answer 4

更新您的 CSS (demo)：

div:hover {
    border-color: red;
}

或者，将类添加到您想要共享通用样式的元素 (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;
}

Answer 5

只是通过模棱两可的问题示例进行猜测。你也可以说什么不适合风格。你用*:hover 说“全部”，所以它做到了。

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>

Answer 6

目前您正在使用 *-selector 将 :hover 应用于页面上的所有元素，您可以在此处阅读更多相关信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

通过选择 div 使其更具体：

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

Answer 7

您可以简单地使用以下代码：

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