Add class to link in wp_list_pages

I’m trying to create a hover-effect on a list-item within the wp_list_pages() function. I’m creating a theme for WordPress, but can’t seem to get the hover effect working. I’m pretty new at this, so bear with me.

My css looks like this:

a.nav:hover { color: yellow; } 

So for my html-code I add the “nav”-class to my links, like this:

<ul class="nav">
<li><a class="nav" href="#">HOME</a></li>
</ul>

This works, it changes the color of the link to yellow. So far so good. But when I try to change this html-code to php-code the class isn’t there.

I use the wp_list_pages() function, like this:

<ul class="nav">
<?PHP wp_list_pages('title_li=&depth=1&sort_column=menu_order&exclude='); ?>
</ul>

And the outcome then is:

<ul class="nav">
<li class="page_item page-item-23"><a href="http://example.com/blog/page_id=23">HOME</a></li></ul>

So my question is, how to I add the nav class to this link? Is there an attribute within the function or something? Again, I’m really new to this

Answer

from the wordpress docs for wp_list_pages() http://codex.wordpress.org/Function_Reference/wp_list_pages#Markup_and_styling_of_page_items :

ll list items (li) generated by wp_list_pages() are marked with the class page_item. When wp_list_pages() is called while displaying a Page, the list item for that Page is given the additional class current_page_item.

with that, the easiest thing you can do is to just change your hover code to:

li.page_item:hover { color: yellow; }