Is there a way to change the color of text on hover with inline css?

Issue

I have the code below for my nav bar. I want the text in the "Download Freebies" item to change color when the mouse is hovered over it. I am only editing an existing template and there's some css already written for it in the style sheet (for "single-freebie" and "freebie-box"). What can I add (and where) to make the text "Download Freebies" change color to blue when the mouse is hovered over it.

PS: I've already tried the ":hover" and maybe one or two other "solutions" I found online. The color isn't changing and the border of the "Download Freebies" instead jumps upwards or sideways when hovered. I know I am doing something wrong but can't figure out what it is. I am happy to post more code if you specifically request anything you want to look at for me.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li ><a href="index.html">Home</a></li>
                            <li><a href="about.html">About</a></li>                             
                            <li><a href="./index.html#download-freebies">Download Freebies</a></li>
                            <li><div class="single-freebie">
                            <a href="upload-resources.html" class="freebie-box">Upload resources</a></li>
                            <li>                                    
                            </li>
                        </ul><!-- / ul -->
                    </div><!-- /.navbar-collapse -->

Solution

You can use this or you can use JavaScript. I think both will meet your needs.

<li ><a href="index.html" 
   onMouseOver="this.style.color='#000'"
   onMouseOut="this.style.color='#333'">Home</a></li>
<li><a href="about.html"
   onMouseOver="this.style.color='#000'"
   onMouseOut="this.style.color='#333'">About</a></li>  

Answered By - Kayra