Question: ```
<li><a href="home.html"> Home </a> </li>
<li> <a href="contact.html">Contact </a></li>

$('li').mouseenter( function() { 
    $(this).attr('a').css("color", "red");   
});

```

fails. I am trying to understand how to reach that a within that 'li'. (not any 'li a')

Answer: 
`a` is an element not an attribute, you can use `find` method:

```
$('li').mouseenter(function() { 
    $(this).find('a').css("color", "red"); 
    // or using $(selector, context):
    // $('a', this).css("color", "red"); 
});

```

However JavaScript doesn't work like CSS, you should change the color on `mouseleave` event, you can create a class and use `toggleClass` method:

```
.red {
   color: red;
}

```

```
$('li').hover(function() { 
    $(this).find('a').toggleClass('red');
});

```

And you can also use CSS (*lighter and faster*):

```
li:hover a {
    color: red;
}

```
You can do this way too:

```
$('li').mouseenter( function() { 
   $('a', this).css("color", "red");   
});

```