不适用：悬停时悬停在：元素之前

Question

我想将一些样式应用于：before伪元素时悬停元素，而不是当悬停时：before元素本身。可能吗？

HTML：

<div class="box">Hover this to get green</div> 

CSS：

.box { 
    border: 1px solid black; 
} 

.box:before { 
    border: 1px solid black; 
    transform: translateY(20px); 
    position: absolute; 
    color: red; 
    content: "Hovering this should not make it green"; 
} 

.box:hover:before { 
    color: green; 
} 

JSFiddle

Answer 1

你可以伪元件，其也将从中删除悬停事件上设置pointer-events: none。

.box { 
 
    border: 1px solid black; 
 
} 
 
.box:before { 
 
    border: 1px solid black; 
 
    transform: translateY(20px); 
 
    position: absolute; 
 
    color: red; 
 
    content: "Hovering this should not make it green"; 
 
} 
 
.box:hover:before { 
 
    color: green; 
 
} 
 
.box:before { 
 
    pointer-events: none; 
 
}

<div class="box">Hover this to get green</div>