javascript - 在悬停时使用样式 1 更改所有具有相同 id 的所有内容，同时使用样式 2 更改悬停的 div

Question

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

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

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

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

我尝试过类似的方法来更改用户悬停的 div。但我无法弄清楚我如何同时改变所有其他人。我需要javascript吗？还是可以单独使用 css 完成？

 .usercontainer:hover 
  {

   background-color: red;
    opacity: 1.0;  
    }

标签： javascriptcss

Answer 1

我仅与 css 方法共享，尽管您可以通过在父级添加一个类来实现javascript。

这种方法的缺点是您必须使用!important覆盖子样式。

.children {
    display: inline-block;
	height: 100px;
	width: 100px;
	background-color: grey;
	color: red;
	font-size: 50px;
	border: solid 1px yellow;
}

.parent:hover .children {
	opacity: 0.2;
}

.children:hover {
	opacity: 1 !important;
}

<div class="parent">
    <div class="children">1</div>
    <div class="children">2</div>
    <div class="children">3</div>
    <div class="children">4</div>
</div>