是否有可能改变：悬停后，但如果后面的元素本身被徘徊不能？

Question

现在我有

class-name:hover:after {} 

工作正常，但是当我将鼠标悬停在该元素的一部分之后，以及它触发。有没有办法让:hover CSS只出现在只是父元素（而不是:after生成的部分）？如果只用CSS就可以做到，我宁愿不诉诸Javascript。

我在这里做一个小提琴证明：https://jsfiddle.net/fthxb9z3/1/

它确实悬停时，我将鼠标悬停在“HOLA”，但我希望它只是做“嗒嗒”悬停

Answer 1

不可能的。

::after是一个伪元素，因此是它所属元素的一部分。如果::after被徘徊，则该元素被徘徊，而不管::after是否在被占用的空间内呈现，但是其父母或被呈现在完全不同的区域中。

当::after放在父外，你可以通过给::afterpointer-events:none取消父悬停效果，有效地让悬停（和所有其他指针事件）通过。但在你的情况下，他们会通过父母。

如果你想要一个物品内的物品不会被徘徊，你必须使用与position:relative共同的父母在其上面的物品的兄弟姐妹覆盖它。兄弟姐妹必须放置在DOM的悬停元素之后，或者需要比悬停元素更高的z-index才能在上面呈现。

概念证明：

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

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