html - 悬停在一个 div 上，更改此 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 时，悬停效果会起作用。
源是 here

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

Answer 1

你只需要改变 <a> 的颜色<div> 时的元素悬停在:

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

fiddle : Fiddle