WordPress中CSS实现相邻Div悬停改变另一Div透明度问题

你的问题出在CSS选择器的使用上：.dog_box:hover .cat_box是子元素选择器，它只会匹配.dog_box内部的.cat_box元素，但你的HTML里.cat_box是.dog_box的同级相邻元素，不是子元素，所以这个选择器根本选不到目标元素。

正确的解决方案 #

使用CSS相邻兄弟选择器(+)，它专门用来匹配紧跟在目标元素之后的同级元素。修改后的CSS代码如下：

.dog_box {
    height: 200px;
    width: 200px;
    background-color: #000000;
    float:left;
}

.cat_box {
    height: 200px;
    width: 200px;
    background-color: red;
    float:left;
}

/* 关键修改：用相邻兄弟选择器+ */
.dog_box:hover + .cat_box {
    opacity: 0.5;
}

对应的HTML结构保持不变：

<div class="dog_box"></div><div class="cat_box"></div>

额外说明 #

如果后续你的布局里.cat_box不是紧跟在.dog_box后面（中间有其他同级元素），可以改用通用兄弟选择器(~)，它能匹配目标元素之后所有的同级元素，写法是：

.dog_box:hover ~ .cat_box {
    opacity: 0.5;
}

WordPress环境注意事项 #

如果在你的WordPress站点中修改后仍不生效，可能是主题自带的CSS优先级更高。可以尝试给选择器增加权重，比如加上父容器的类名（假设父容器类是box-container）：

.box-container .dog_box:hover + .cat_box {
    opacity: 0.5;
}

尽量避免使用!important，除非万不得已，因为它会破坏CSS的优先级规则，增加后续维护难度。

内容的提问来源于stack exchange，提问作者beaner2880