CSS实现全宽圆角悬停效果：侧边栏导航优化指南

.sidebar-nav ul li a:hover {
    background: #007bff;
    color: #fff;
}

.sidebar-nav ul li:hover {
    background: #007bff; /* 设置悬停时的背景色 */
    border-radius: 10px; /* 设置圆角半径 */
}

.sidebar-nav ul li:hover a {
    color: #fff; /* 悬停时改变链接文本颜色 */
}

.sidebar-nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style: none; /* 移除列表默认的圆点或数字 */
    line-height: 30px;
    padding: 0 15px; /* 调整左右内边距，确保内容与侧边栏边缘对齐 */
    margin: 0; /* 移除默认外边距 */
}

<div class="sidebar" id='mySidebar'>
    <div class="sidebar-header">
        <div class="profile">
            <div class="profile-image">
                <img src="https://www.directive.com/images/easyblog_shared/July_2018/7-4-18/b2ap3_large_totw_network_profile_400.jpg" alt="Profile Image">
            </div>
            <div class="profile-name">
                <i class="fas fa-chess-pawn"></i><span>Umann Goswami</span>
            </div>
        </div>
    </div><!--sidebar-header-->
    <div class="sidebar-nav">
        <ul>
            <li><a href=""><span class="icon"><i class="fas fa-home"></i></span>Home</a></li>
            <li><a href=""><span class="icon"><i class="fas fa-user"></i></span>Profile</a></li>
            <li><a href=""><span class="icon"><i class="fas fa-cog"></i></span>Settings</a></li>
            <li><a href=""><span class="icon"><i class="fas fa-sign-out-alt"></i></span>Logout</a></li>
        </ul>
    </div>
</div><!--sidebar-->

/* 侧边栏基础样式 */
.sidebar{
    display: block;
    position: fixed;
    height: 100vh;
    top: 0px;
    left: 0;
    background-color: #fff;
    width: 15.625rem; /* 250px */
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
    z-index: 0;
    transition: all 0.5s ease;
}
.open.sidebar {
    display: block;
}
#mySidebar{
    transition:all 0.2s linear;
    /*transform:translateX(-250px); 初始隐藏状态 */
}
#mySidebar.open{
    transform:translateX(0); /* 打开状态 */
}

/* 侧边栏头部样式 */
.sidebar-header{
    width: 100%;
    background: rgba(0, 136,169, 1);
    height: 3rem;
}
.sidebar-header .profile{
    display:  flex;
    color: #fff;
    align-items: center; /* 垂直居中 */
    height: 100%; /* 确保profile占满header高度 */
}
.profile .profile-image img{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    object-fit: cover; /* 确保图片填充且不失真 */
    margin-left:  20px;
    pointer-events: none; /* 防止图片作为交互元素 */
}
.profile .profile-name{
    display: flex; /* 使用flex布局对齐图标和文本 */
    align-items: center;
    justify-content: center;
    margin: 0 2px 0 5px;
    font-size: 14px;
}
.profile .profile-name i{
    margin-right: 5px; /* 图标与文本间距 */
    font-size: 16px;
}

/* 侧边栏导航样式 */
.sidebar-nav{
    margin: 0;
}
.sidebar-nav ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style: none; /* 移除默认列表样式 */
    line-height: 30px;
    padding: 0 15px; /* 调整左右内边距 */
    margin: 0; /* 移除默认外边距 */
}
.sidebar-nav ul li{
    width: 100%; /* 确保列表项占据全部宽度 */
    color: #007bff; /* 默认链接颜色 */
    box-sizing: border-box; /* 确保padding和border不增加元素总宽度 */
    padding: 5px 0; /* 为每个列表项添加垂直内边距 */
}
.sidebar-nav ul li a{
    text-decoration: none; /* 移除链接下划线 */
    display: block; /* 使链接填充整个li的宽度 */
    color: inherit; /* 继承父元素的颜色 */
    padding: 0 5px; /* 可选：为链接内容添加额外内边距 */
}

/* 悬停效果 */
.sidebar-nav ul li:hover {
    background: #007bff; /* 悬停时背景色 */
    color: #fff; /* 悬停时列表项文本颜色 */
    border-radius: 10px; /* 悬停时圆角 */
}

.sidebar-nav ul li:hover a {
    color: #fff; /* 确保悬停时链接文本颜色为白色 */
}