如何将翻转功能实现到已创建的多个按钮

Question

我正在尝试更改网站的按钮并在其上添加翻转颜色。我已经尝试了很多解决方案，但似乎没有一个有效。我对编码非常缺乏经验。

我

尝试使用许多其他资源，但它们都是从头开始的，我真的不明白如何将它们实现到我的程序中。

这是我style.css文件中的代码段：

li{
    display:inline;
    font-size:30px;
    padding-left:80.5px;
    padding-right:80.5px;
    border:inset;
    background-color:White;
    color:aquamarine
}

这些是每个页面上的按钮：

<u1>
    <li><a href="Index.html">Home</a></li>
    <li><a href="General Information.html">General Information</a></li>
    <li><a href="Find Us.html">Find us</a></li>
    <li><a href="Contact Us.html">Contact Us</a></li>
</u1>

我希望上面显示的按钮的颜色在我把鼠标放在它们上面时会改变颜色。

Answer 1

    li {
        display: inline;
        font-size: 30px;
        border: inset;
        background-color: White;
        color: aquamarine
    }
    .list a {
        padding: 0 80.5px;
    }
    .list a:hover {
        color: springgreen;
        background-color: brown;
    }
<u1 class="list">
    <li><a href="Index.html">Home</a></li>
    <li><a href="General Information.html">General Information</a</li>
    <li><a href="Find Us.html">Find us</a></li>
    <li><a href="Contact Us.html">Contact Us</a></li>
</u1>