如何实现将鼠标悬停功能转换到已经创建的多个按钮?

时间:2019-06-16 20:46:02

标签: html css

我正在尝试更改网站的按钮,并在其上添加过渡颜色。我尝试了很多解决方案,但似乎都没有用。我对编码非常缺乏经验。

我曾尝试使用许多其他资源,但是它们都是从头开始的,我不太了解如何将其实现到程序中。

这是我的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>

我希望将鼠标悬停在上面显示的按钮的颜色会改变颜色。

1 个答案:

答案 0 :(得分:0)

    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>