css - hover 注意事项

css-hover不生效的原因

1. 权重问题
2. hover后面的只能写子元素或者兄弟元素（兄弟元素还必须是代码逻辑结构后面的兄弟）

<style>
body {
  margin: 0px;
}
.border {
  border: 1px solid #ccc;
}
.box {
  width: 300px;
  height: 300px;
  margin: 200px auto;
  position: relative;
  border: 1px solid #ccc;
}
.box .content {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #f00;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box .content:hover + .content1 {
//这里content与content1是兄弟元素，并且content1在content结构逻辑的后面，所以这里生效
  background-color: #f00;
}
.box .content1 {
  width: 100px;
  height: 100px;
  border: 1px solid #f00;
  transition: all 2s linear;
}
.box .content1:hover + .content {
//这里content与content1是兄弟元素，并且content在content1结构逻辑的前面，所以这里的hover不生效
  background-color: #f00;
}

</style>
<div class="box">
        <div class="content"></div>
        <div class="content1"></div>
    </div>