Question

当我悬停外部课程时，我正在尝试更改按钮的颜色。这就是我所做的，但它不起作用..

HTML：

<table class="hover_element">
    Hover me!
</table>
<div class="first_div">
    <div class="second_div">
        <div class="third_div">
            <button class="apply_hover">
                Apply hover on this element
            </button>
        </div>
    </div>
</div>

CSS：

.hover_element:hover ~ .first_div .second_div .third_div .apply_hover {
    color: orange;
}

https://jsfiddle.net/umz8t/2754/

Answer 1

我在编辑后改变了整个答案。

此处的问题是您应该从:hover类中移除.hover_element：

.hover_element ~  .first_div .second_div .third_div .apply_hover:hover

工作jsfiddle ：https://jsfiddle.net/umz8t/2758/

如果您希望表格的hover事件突出显示其下的div，则应该做两件事：

1.将<tr><td>添加到表中（:hover事件不会起作用）：

<table class="hover_element">
    <tr>
        <td>Hover me!</td>
    </tr>
</table>

2.从:hover移除.apply_hover：

.hover_element:hover ~ .first_div .second_div .third_div .apply_hover

工作jsfiddle ：https://jsfiddle.net/umz8t/2759/

如果你想同时突出显示它们（:hover事件.hover_element），那么应该添加：

.hover_element:hover, .hover_element:hover ~ .first_div .second_div .third_div .apply_hover

工作jsfiddle ：https://jsfiddle.net/umz8t/2760/

将元素悬停在外部类上

1 个答案: