如何实现鼠标hover某元素时，其余元素opacity降至0.5？

要达成你要的交互效果，核心思路是利用父容器的hover状态批量控制子元素，再单独恢复当前hover元素的样式，具体修改步骤如下：

1. 确保所有.service-item有共同父容器 #

首先需要给所有.service-item套一个父容器（比如类名设为.service-container），这是实现兄弟元素交互的前提——CSS无法直接选择「除当前hover元素外的所有兄弟元素」，必须借助父容器来实现批量控制。

2. 修改CSS代码 #

替换原有代码为以下内容：

/* 父容器hover时，让所有子元素半透明 */
.service-container:hover .service-item {
    opacity: 0.5;
}

/* 单独恢复当前hover的.service-item样式 */
.service-container .service-item:hover {
    opacity: 1;
    box-shadow: 0 10px 28px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.0);
}

/* 保留基础样式，删除重复的border设置 */
.service-item {
    padding: 50px 30px 40px;
    border: 1px solid rgb(247, 241, 241);
    cursor: pointer;
    transition: all .4s;
}

3. 逻辑说明 #

• 当鼠标移入父容器.service-container时，所有子元素.service-item的opacity会被统一设为0.5；
• 当前被hover的.service-item会通过更具体的选择器优先级，把自身opacity恢复为1，同时保留原有的阴影效果；
• 原代码中.service-item:hover的border设置和默认状态重复，直接删除即可减少冗余。

内容的提问来源于stack exchange，提问作者constobidullah