导航栏样式练习：项目实例解析

body {
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
}
#navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    margin-top: 150px;
}
#navigation li {
    margin: 0 10px;
}
#navigation a {
    text-decoration: none;
    color: #313131;
    font-size: 50px;
    font-weight: bold;
    font-family: sans-serif;
    transition: all 0.7s ease;
    padding: 14px 20px;
    text-transform: uppercase;
}
#navigation a:hover {
    font-size: 70px;
}

window.addEventListener('DOMContentLoaded', (event) => {
    const navLinks = document.querySelectorAll('#navigation a');
    navLinks.forEach((link, index) => {
        link.addEventListener('mouseover', () => {
            switch (index) {
                case 0:
                    link.style.color = 'red';
                    break;
                case 1:
                    link.style.color = 'orange';
                    break;
                case 2:
                    link.style.color = 'yellow';
                    break;
                case 3:
                    link.style.color = 'green';
                    break;
                default:
                    link.style.color = 'blue';
            }
        });
    });
});