a：after要素に他の要素をホバリングすることで影響を与えることはできませんか？

Question

それはそうではありませんか？

は基本的に、私が持っている：私は "リンク" の上に置くと

.arrow:after { 
 
    border-color: rgba(241, 241, 241, 0); 
 
    border-bottom-color: #FFF; 
 
    border-width: 8px; 
 
    margin-left: -8px; 
 
} 
 

 
a.test:hover > .arrow:after { 
 
    border-bottom-color: red !important; 
 
}

<a href="#" class="test">Link</a>

は、.arrow:afterは変更する必要がありますが、それはしません。どんな解決策ですか？影響を受ける要素が

• 子
• 将来の兄弟要素の

の子が推移し、今後の兄弟

ある場合

Answer 1

それは、可能です。

例（未来兄弟）：

.arrow:after { 
 
    border-color: rgba(241, 241, 241, 0); 
 
    border-bottom-color: #FFF; 
 
    border-style: solid; 
 
    border-width: 8px; 
 
    margin-left: -8px; 
 
    content: ''; 
 
} 
 

 
.test:hover ~ .arrow:after { 
 
    border-bottom-color: red; 
 
}

<span class="test">Test</span> 
 
<hr /> 
 
<a href="#" class="arrow">Arrow</a>

あなたはDOM内での位置を完全に自由をしたい場合は、javascript見ています。