Hover to a div, change the color of the <a> element inside this div

Question

What I want to do is quite easy, my code is as below:

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;
}

The problem is, when I add href="" to the , the hover can't work. If I remove the href="" , when I move my mouse pointer to the div, the hover effect works.
Souce is here

Anybody know what's the reason? Thanks!

Answer 1

You just need to change the color of the <a> element when the <div> is hovered over:

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

Fiddle: Fiddle

Answer 2

You can use this.

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