Javascript 悬停时，使用样式1更改具有相同id的全部，同时使用样式2更改悬停的div

我有一些动态用户生成的div。 我正在尝试创建一个函数，这样当用户将鼠标悬停在其中一个div上时，它会高亮显示，而其他div会变得模糊

因此，我需要弄清楚如何（如果可能的话）用一种样式更改悬停的div，同时用另一种样式更改所有其他的div

生成的div只是通过php生成的一个简单div，如下所示：

  <div class="usercontainer" id="usercontainer"> </div>

---

我只使用css方法共享，不过您可以通过使用

javascript

在父级添加一个类来实现

这种方法的缺点是必须使用

！重要信息

以覆盖子样式

.children{
显示：内联块；
高度：100px；
宽度：100px；
背景颜色：灰色；
颜色：红色；
字体大小：50px；
边框：实心1px黄色；
}
.家长：悬停。孩子{
不透明度：0.2；
}
.儿童：悬停{
不透明度：1！重要；
}

1.
2.
3.
4.

为什么不让未悬停的内容变得模糊，然后将悬停的内容解除模糊？或者你没有提到其他用途吗？我希望它们不是都有相同的ID，因为这是无效的HTML。CSS在这里没有帮助，因为它无法选择DOM，所以悬停div之前的任何内容都不会受到影响，JS会简单得多。@FeaturedSpace我不想找它。正如我所提到的，当用户悬停时，我需要将悬停的一个高亮显示，其他的模糊显示。@Paulie_D我不知道！非常感谢。我将为每个div的派生添加一个增长变量，这样它们都会得到一个不同的id。这当然是一个选项，但我不确定这正是OP想要的。我认为这正是OP想要的行为。造型由他自己决定，之后他想做什么就做什么。有人在空白处徘徊，一切都变得灰暗，但这是固定的，这几乎是完美的。除了我不感兴趣的是，如果用户将鼠标悬停在“家长”上，一切都会变得模糊。只有当用户将鼠标悬停在示例中的一个“子对象”上时，才会发生这种情况。这有意义吗？如果我的问题表述得很糟糕，我很抱歉。@Jose，但你会如何“解决”这个问题？因为这对我的申请来说是个大问题。

 .usercontainer:hover 
  {

   background-color: red;
    opacity: 1.0;  
    }