我希望当我将鼠标悬停在其中一项项目上时，其他项目的不透明度将减少到 0.5。我该怎么办？

Question

我希望当我

hover 

将鼠标悬停在其中一项项目上时，其他项目的

opacity 

将减少到0.5。我该怎么办？

.service-item {
    padding: 50px 30px 40px;
    border: 1px solid rgb(247, 241, 241);
    cursor: pointer;
    transition: all .4s;
}

.service-item:hover {
border: 1px solid rgb(247, 241, 241);
box-shadow: 0 10px 28px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.0);
}

Answer 1

您没有提供 HTML，所以我必须创建自己的 HTML。希望您可以将以下内容推断到您自己的代码中。

.services:hover .service-item:not(:hover) {
  opacity: .5;
}

.service-item {
  padding: 50px 30px 40px;
  border: 1px solid rgb(247, 241, 241);
  cursor: pointer;
  transition: all .4s;
}

.service-item:hover {
  border: 1px solid rgb(247, 241, 241);
  box-shadow: 0 10px 28px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.0);
}

<div class="services">
  <div class="service-item">Service #1</div>
  <div class="service-item">Service #2</div>
  <div class="service-item">Service #3</div>
</div>