不適用：懸停時懸停在：元素之前

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>