将鼠标悬停在div上，更改<a> element inside this div</a>的颜色

Question

我想要做的很简单，我的代码如下：

HTML：

<div class="outer">
    <a href="">line 1</a>
    <a>line 2</a>
</div>

的CSS：

a{
    display:block;
    text-decoration:none;
}

.outer:hover{
    color:#ff0000;
}

问题是，当我添加href=""时，悬停不起作用。如果我删除href=""，当我将鼠标指针移动到div时，悬停效果会起作用 Souce是here

有人知道是什么原因吗？谢谢！

Answer 1

当<a>悬停在<div>时，您只需要更改.outer:hover a{ color:#ff0000; } 元素的颜色：

{{1}}

小提琴： Fiddle

Answer 2

你可以使用它。

.outer:hover a{
    color:#ff0000;
}