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

Question

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

Does this answer your question? https://stackoverflow.com/questions/36534721/how-do-i-define-css-class-in-an-inline-css — Ingo Steinke, Feb 11 '22 at 13:00
Or this: https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css — Anthony Bird, Feb 11 '22 at 13:22
Does this answer your question? [CSS Pseudo-classes with inline styles](https://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles) — Marty McVry, Feb 11 '22 at 15:44

score 0 · Accepted Answer · answered Feb 11 '22 at 15:49

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>

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

1 Answers1