html - 不可能通过将鼠标悬停在另一个元素上来影响: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应该会更改，但不会更改。有什么办法吗？

最佳答案

如果受影响的元素是


一个孩子
未来的同胞
未来同胞的孩子


的元素悬停了。

示例（将来的兄弟姐妹）：

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

关于html - 不可能通过将鼠标悬停在另一个元素上来影响:after元素吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42331300/