用纯css模拟鼠标

Question

当我用鼠标在上面悬停时，我需要设置元素的样式。但是，我不想为它的父DOM元素设置样式。然而，当我使用:hover时，所讨论的元素按我想要的样式设置，但不幸的是，它的所有父元素也都被样式化了。

*:hover {
    border-color: red;
}

​

​

演示

​

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。有相当多的话题可供讨论：

如何应用子程序:悬停但不应用父级:悬停

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

更新您的CSS (演示)：

div:hover {
    border-color: red;
}

或者，将类添加到要共享公共样式(演示)的元素中。

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