css侧边导航栏，鼠标移到时变色

CSS侧边导航栏实现鼠标移到时变色的效果，通常会使用CSS的`:hover`伪类选择器来实现。`:hover`伪类会在用户将鼠标悬停在元素上方时应用相应的样式。以下是一个简单的实现方法：

1. 首先，你需要有一个包含导航链接的侧边栏的HTML结构。

<div class="sidebar">
    <a href="#" class="sidebar-item">首页</a>
    <a href="#" class="sidebar-item">产品</a>
    <a href="#" class="sidebar-item">服务</a>
    <a href="#" class="sidebar-item">关于我们</a>
</div>

2. 然后，在CSS中设置默认的侧边栏样式，并且定义`:hover`伪类来改变鼠标悬停时的样式。

.sidebar {
    width: 200px;
    background-color: #f0f0f0;
}

.sidebar-item {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

.sidebar-item:hover {
    background-color: #ddd;
}

在这个例子中，`.sidebar-item`类定义了导航链接的基本样式，而`.sidebar-item:hover`则定义了当鼠标悬停在链接上时背景颜色变化的样式。`transition`属性用于创建平滑的背景颜色变化效果。