有没有办法使用内联 css 更改悬停时的文本颜色？答案

【问题标题】：Is there a way to change the color of text on hover with inline css?有没有办法使用内联 css 更改悬停时的文本颜色？
【发布时间】：2022-02-11 23:49:44
【问题描述】：

我的导航栏有以下代码。我希望“下载免费赠品”项目中的文本在鼠标悬停在它上面时改变颜色。我只是在编辑一个现有的模板，并且在样式表中已经为它编写了一些 css（用于“single-freebie”和“freebie-box”）。当鼠标悬停在文本“下载免费赠品”上时，我可以添加什么（以及在哪里）将颜色变为蓝色。

PS：我已经尝试过 ":hover" 以及我在网上找到的一两个其他 "解决方案"。颜色没有改变，“下载免费赠品”的边框在悬停时会向上或侧向跳跃。我知道我做错了什么，但无法弄清楚它是什么。如果您特别要求您为我查看任何内容，我很乐意发布更多代码。

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

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/questions/36534721/…
或者这个：stackoverflow.com/questions/1033156/…
我会去看的。谢谢你们。
这能回答你的问题吗？ CSS Pseudo-classes with inline styles

标签： html css

【解决方案1】：

您可以使用它，也可以使用 JavaScript。我认为两者都能满足您的需求。

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

【讨论】：