不可能通過懸停在另一個元素上來影響a：after元素嗎？

基本上，我有：

.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應該改變，但事實並非如此。任何解決方案

來源

2017-02-19 Arvid Ingemarsson

你沒有任何東西在你的html中，有一類'箭頭' - 是缺少的東西？ –

您應該始終使用內容：「」與：after /之前的僞元素。 –

'.arrow'元素可能不是'.test'的直接子元素。如果是兄弟姐妹，你應該使用組合器'〜'。那將是：'a.test：hover〜.arrow :: after'。另外，僞元素需要定義「內容」，甚至是空的。 – pol

這是可能的，如果受到影響的元素是

孩子
未來的兄弟姐妹
未來的兄弟姐妹

元素

的孩子徘徊。

例（未來的兄弟姐妹）：

.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。

來源

2017-02-19 18:58:12

不可能通過懸停在另一個元素上來影響a：after元素嗎？

回答

相關問題