html - 如何对已创建的多个按钮实现翻转功能？

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>