<分区>
<分区>
hover on button but div does not change its property
通过将鼠标悬停在其后创建的另一个标签(按钮)上来更改 div 的 CSS 属性
.zz {
text-align: center;
line-height: 100px;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 100px;
color: white;
background: red;
border: 4px solid black;
margin: 100px;
-webkit-transition: transform 1s;
-webkit-transition-timing: ease-in-out;
-webkit-transition-delay: 0.1s;
float: left;
}
#btn:hover~.zz {
background: green;
-webkit-transform: rotate(40deg) translate(100px, 20px);
}<div class="zz"> this is div</div>
<button id="btn"> hover me </button>最佳答案
您需要将 div 放在 DOM 中的按钮之后，以供同级选择器使用。或者，您可以使用 javascript 将类添加到 .zz div。
.zz {
text-align: center;
line-height: 100px;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 100px;
color: white;
background: red;
border: 4px solid black;
margin: 100px;
-webkit-transition: transform 1s;
-webkit-transition-timing: ease-in-out;
-webkit-transition-delay: 0.1s;
float: left;
}
#btn:hover ~ .zz {
background: green;
-webkit-transform: rotate(40deg) translate(100px, 20px);
}<button id="btn"> hover me </button>
<div class="zz"> this is div</div>关于html - 在 div 之后的悬停按钮上更改 div css 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46559708/