Question

现在我有

class-name:hover:after {}

工作正常，但是当我将鼠标悬停在元素的后部分上时它会触发。是否有一种方法可以使:hover CSS只出现在只是父元素（而不是:after生成的部分）时？如果只使用CSS就可以使用Javascript，我宁愿不使用Javascript。

我在这里做了一个小提琴演示：https://jsfiddle.net/fthxb9z3/1/

当我将鼠标悬停在“hola”上时它会悬停，但我希望它只在“blah”上悬停

Answer 1

不可能。

::after是一个伪元素，因此是它所属元素的一部分。如果::after悬停，则元素会悬停，无论::after是否在占用的空间内呈现，而是在其父级内呈现，还是在完全不同的区域中呈现。

当::after放置在父级之外时，您可以通过提供::after pointer-events:none来取消对父级的悬停效果，并有效地让悬停（以及所有其他指针事件）通过通过。但在你的情况下，他们会传递给父母。

如果您想要一个项目中的某个区域不会悬停该项目，那么您必须使用position:relative的共同父项覆盖它上面呈现的项目的兄弟。兄弟姐妹必须放在DOM中的悬停元素之后，或者需要比悬停元素更高的z-index才能在上面呈现。

概念证明：

＆＃13;

body {background-color: #ccc}
relative-parent, 
relative-parent * {
  display: inline-block;
  padding: .3rem;
  box-sizing: border-box;
}
relative-parent {
  position:relative;
}
hover-element {
  width: 10rem;
  height:10rem;
  background-color: #eee;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
hover-element:hover {
  background-color: #f00;
  cursor: pointer;
  color: #fff;
}
hover-element:after,
hover-mask {
  position: absolute;
  width: 4rem;
  height: 4rem;
  border: 1px solid #000;
  box-sizing: border-box;
}
hover-element:after {
  right: -5.3rem;
  bottom: 2rem;
  content: '::after'
}
hover-mask {
  bottom: 2rem;
  right: 2rem;
}

＆＃13;

<relative-parent>
  <hover-element>hover-element</hover-element>
  <hover-mask>sibling</hover-mask>
</relative-parent>

＆＃13;

是否有可能改变：悬停后，但是如果后续元素本身悬停，则不能改变？

1 个答案: