在div之后的悬停按钮上更改div css属性

Question

将鼠标悬停在按钮上,但div不会更改其属性

通过将鼠标悬停在其后创建的另一个标记(按钮)上来更改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>

Answer 1

您需要div将按钮放在DOM中以供兄弟选择器使用.或者,您可以使用javascript将一个类添加到.zzdiv.

.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>