Css 是否可以更改：after on hover，但如果after元素本身处于悬停状态，则不能更改？

现在我有

class-name:hover:after {}

这很好，但是当我将鼠标悬停在元素的后面部分时，它也会触发。是否有办法使

：hover

CSS仅在我将鼠标悬停在父元素（而不是由

：after

生成的部分）上时才显示？如果有可能只使用CSS，我宁愿不使用Javascript

---

我在这里拉了把小提琴，演示：

当我将鼠标悬停在“hola”上时，它会将鼠标悬停在“blah”上，但我希望它只将鼠标悬停在“blah”上，这是不可能的

：：after

是一个伪元素，因此是它所属元素的一部分。如果将

：：after

悬停，则元素将悬停，而与

：：after

是否在占用的空间内渲染，但其父元素还是在完全不同的区域中渲染无关

当

：：after

放置在父对象外部时，您可以通过指定

：：after

指针事件：none

取消父对象上的悬停效果，并有效地让悬停（以及所有其他指针事件）通过。但在你的情况下，它们会传递给父母

如果您希望在项目内的某个区域中该项目不会悬停，则必须使用呈现在其上方的项目的同级来覆盖该区域，并使用带有

位置：相对
的公共父级。兄弟元素必须放在
DOM
中悬停元素的后面，或者需要比悬停元素的
z索引更高的
z索引才能在上面渲染

概念证明：


body{背景色：#ccc}
亲亲，
相对父母*{
显示：内联块；
填充：.3rem；
框大小：边框框；
}
亲本{
位置：相对位置；
}
悬停元素{
宽度：10雷姆；
高度：10雷姆；
背景色：#eee；
过渡：所有.3s三次贝塞尔（.4,0,2,1）；
}
悬停元素：悬停{
背景色：#f00；
光标：指针；
颜色：#fff；
}
悬停元素：在，
悬停面罩{
位置：绝对位置；
宽度：4rem；
身高：4rem；
边框：1px实心#000；
框大小：边框框；
}
悬停元素：在{
权利：-5.3rem；
底部：2rem；
内容：'：：之后'
}
悬停面罩{
底部：2rem；
右：2rem；
}

悬停元素
兄弟姐妹
您的意思是，在父元素溢出的情况下，当您将鼠标移出父元素时，
之后的
元素保持显示，例如？在
之后将被
占据的区域悬停时，AFAIK mouseenter不会错误触发。呃，我认为这有点不同。更清楚地说，我基本上在
:after
中用
内容显示文本“abc”。它出现在正文的右边。当我将鼠标悬停在主文本上时，我希望“abc”改为“abcdef”。但现在，当我把“abc”悬停时，它也会变成“abcdef”。我想让它只在我将鼠标悬停在实际文本上时更改文本，而不是从
生成的“abc”：在
之后，我在这里做了一个小提琴演示：当我将鼠标悬停在“hola”上时，它会悬停，但我希望它只在“blah”上悬停谢谢！我想在这一点上，只使用Javascript会更容易。实际上，在这方面，
CSS
和
Javascript
几乎是一样的。好了，您不能更改元素的悬停区域。你所能做的就是用看不见的元素遮罩它，这样它就不再悬停。啊，好的，我明白了。那我先试试你的想法。谢谢你的帮助！！