悬停影响两个元素

Question

我有问题。我无法强制代码同时悬停h3和div“下划线”。

我的代码是：https://jsfiddle.net/nac3570n/

正如你可以看到悬停的工作，但同时不会影响下划线，除非你将光标移到下划线

Answer 1

尝试更改此内容：

.underline:hover {
    background-color: red;
}

到此：

a:hover .underline {
    background-color: red;
}

基本上我们移动两个:hover事件以触发相同的操作。在这种情况下，将鼠标悬停在父<a>标记上。

Answer 2

https://jsfiddle.net/qmg6wbv5/1/

...小提琴并没有使用你的确切风格，但我认为你在h3上使用伪元素（:after）会更容易。这样它自然会响应徘徊在h3上。希望能让你走上正轨。