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;  
    }

Answer 1

尽管您可以通过使用javascript在父级添加一个类来做到这一点，但我仅与CSS方法共享。

此方法的缺点是您必须使用!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>

悬停时，将样式1更改为所有具有相同ID的代码，而更改样式2的悬停div

1 个答案: