css 将鼠标悬停在一个 div 上，另一个 div 会更改不透明度

Question

我正在尝试在我的 WordPress 网站中使用 CSS 来更改相邻 div 列悬停时的 div 列的不透明度。

这是我正在使用的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;
}

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

这是我的网站链接。我不确定我做错了什么。 https://parapetcarestg.wpenginepowered.com/home2/

Answer 1

正如我在评论中所说，您的选择器正在寻找后代。您想使用兄弟选择器，例如

~

(general) 或

+

(adjacent)

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

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

Answer 2

当前代码更改

cat_box

内所有

dog_box

元素的不透明度。

在此示例中，您要使用 后续同级组合器 (

~

) 更改与

cat_box

处于同一级别但稍后出现在页面上的所有

dog_box

元素的 CSS。

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