用css3实现当鼠标移进去时当前亮其他变灰效果

要实现当鼠标移进去时当前亮其他变灰效果，可以采用CSS3中的伪类选择器:hover和filter属性。

具体实现步骤如下：

1. 首先在HTML页面中添加一个列表，可以使用
   和
   • 标签来创建一个简单的列表，每个列表项需要设置一个唯一的ID或类名，以便CSS选择器能够准确地匹配它们。

示例代码如下：

<ul>
  <li id="item1">列表项1</li>
  <li id="item2">列表项2</li>
  <li id="item3">列表项3</li>
  <li id="item4">列表项4</li>
  <li id="item5">列表项5</li>
</ul>

1. 在CSS文件中使用:hover伪类选择器为当前鼠标移入的列表项设置高亮样式，同时为其他列表项设置灰色滤镜效果。

示例代码如下：

ul li:hover {
  background-color: #f0f0f0; /* 当前鼠标移入的列表项的背景颜色 */
  color: #333; /* 当前鼠标移入的列表项的文本颜色 */
}

ul li:not(:hover) {
  filter: grayscale(100%); /* 其他列表项的滤镜效果 */
}

其中，:not选择器用于排除当前鼠标所在的列表项，使其不受灰色滤镜的影响。

1. 如果需要为当前鼠标所在的列表项添加动画效果，可以使用CSS3中的过渡效果（transition）或动画效果（animation），为列表项的背景色、文本颜色等属性设置过渡或动画效果。

示例代码如下：

ul li {
  transition: background-color 0.5s ease;
}

ul li:hover {
  background-color: #f0f0f0;
  color: #333;
}

这段代码将为列表项的背景色设置了一个0.5秒的渐变过渡效果，当鼠标移入时背景色会逐渐变浅。

综上所述，以上是使用CSS3实现当鼠标移进去时当前亮其他变灰效果的完整攻略。