当我将鼠标悬停在导航栏区域时，我希望导航栏背景变为白色，而导航栏中其他元素的颜色变为黑色。我该怎么做呢？

<nav class="navbar">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

/* 基础样式 */
.navbar {
    background-color: transparent; /* 默认背景透明 */
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
}

.navbar ul li a {
    color: white; /* 默认文字颜色为白色 */
    text-decoration: none;
    padding: 10px;
    transition: color 0.3s ease; /* 文字颜色平滑过渡效果 */
}

/* 鼠标悬停时的样式 */
.navbar:hover {
    background-color: white; /* 背景变为白色 */
}

.navbar:hover ul li a {
    color: black; /* 文字颜色变为黑色 */
}