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

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

将鼠标悬停在div后面创建的另一个标记（按钮）上，更改div的CSS属性

.zz{
文本对齐：居中；
线高：100px；
字体大小：20px；
字体大小：粗体；
宽度：100px；
高度：100px；
颜色：白色；
背景：红色；
边框：4倍纯黑；
利润率：100像素；
-webkit转换：转换1s；
-webkit过渡时间：易入易出；
-webkit转换延迟：0.1s；
浮动：左；
}
#btn:hover~.zz{
背景：绿色；
-webkit变换：旋转（40度）平移（100像素，20像素）；
}

这里是div
将鼠标悬停在我身上

需要将

div

放在DOM同级选择器的按钮之后。或者，您可以使用javascript向

.zz

div添加一个类

.zz{
文本对齐：居中；
线高：100px；
字体大小：20px；
字体大小：粗体；
宽度：100px；
高度：100px；
颜色：白色；
背景：红色；
边框：4倍纯黑；
利润率：100像素；
-webkit转换：转换1s；
-webkit过渡时间：易入易出；
-webkit转换延迟：0.1s；
浮动：左；
}
#btn:hover~.zz{
背景：绿色；
-webkit变换：旋转（40度）平移（100像素，20像素）；
}

将鼠标悬停在我身上
这是div

您需要将

div

放在DOM中的同级选择器按钮之后。或者，您可以使用javascript向

.zz

div添加一个类

.zz{
文本对齐：居中；
线高：100px；
字体大小：20px；
字体大小：粗体；
宽度：100px；
高度：100px；
颜色：白色；
背景：红色；
边框：4倍纯黑；
利润率：100像素；
-webkit转换：转换1s；
-webkit过渡时间：易入易出；
-webkit转换延迟：0.1s；
浮动：左；
}
#btn:hover~.zz{
背景：绿色；
-webkit变换：旋转（40度）平移（100像素，20像素）；
}

将鼠标悬停在我身上
这是div

#btn:hover~.zz，当

#btn

处于悬停状态时，选择前面有

#btn

id的每个

.zz

类，但在您的情况下，

#btn

在

.zz

之前，因此不选择

.zz

所以，只要改变一下：

<div class="zz"> this is div</div>    ---
<button id="btn"> hover me </button>     |
                            Here   <-----

<button id="btn"> hover me </button>
<div class="zz"> this is div</div>

将鼠标悬停在我身上
这是div
#btn:hover~.zz，当
#btn
处于悬停状态时，选择前面有
#btn
id的每个
.zz
类，但在您的情况下，
#btn
在
.zz
之前，因此不选择
.zz

所以，只要改变一下：

<div class="zz"> this is div</div>    ---
<button id="btn"> hover me </button>     |
                            Here   <-----

<button id="btn"> hover me </button>
<div class="zz"> this is div</div>

将鼠标悬停在我身上
这是div
类似的，因此CSS不可能实现。您需要javascript或更改标记。1。这种方式我知道，但我需要像我说的那样，使用CSS是不可能的。您需要javascript或更改标记。1。这样我知道，但我需要我说的亲爱的