Background Color Change On A:hover

So I basically want to take a navigation i created with div's and make it so that each line (id) will rollover a different color. I've tried a ton of different ways of doing it and

Solution 1:

Never start ID & Class with numerical (1,2,3,) digit. Write like this:

#nav1,#nav2...

HTML

<div class="navcontainer">
        <div id="nav1"><a href="#">home</a></div>
        <div id="nav2"><a href="#">work</a></div>
        <div id="nav3"><a href="#">resume</a></div>
        <div id="nav4"><a href="#">about</a></div>
        <div id="nav5"><a href="#">links</a></div>
</div>

Solution 2:

Change your ID names to be alpha not starting with a number..

IE:

.navcontainer #one a:hover {
color:black;
background-color:red;
}

<div class="navcontainer">
    <div id="one"><a href="#">home</a></div>
    <div id="2"><a href="#">work</a></div>
    <div id="3"><a href="#">resume</a></div>
    <div id="4"><a href="#">about</a></div>
    <div id="5"><a href="#">links</a></div>
</div>