html - 使用 css 在悬停选择器(图像标签)上显示多个 div

Question

如何在图像标签悬停时显示两个 div，我的 html 看起来像这样

<img class='itemImage'>
<div class='selctImgInptWrapper"> <input class='selctImgInpt' type='checkbox' value> </div>
<div class='selctImgInptRetouchWrapper"> <input class='selctImgInptRetouch' type='checkbox' value> </div>

CSS代码

.selctImgInptWrapper { display: none; }
.selctImgInptRetouchWrapper { display: none; }

.itemImage:hover + .selctImgInptWrapper{ display: block; }

此代码仅适用于 selctImgInptWrapper 或 selctImgInptRetouchWrapper 中的一个类我无法同时包含这两个类

我试过了

1) .itemImage:hover + .selctImgInptWrapper , .selctImgInptRetouchWrapper { display: block; }

2) .itemImage:hover + .selctImgInptWrapper .selctImgInptRetouchWrapper { display: block; }

3) .itemImage:hover + .selctImgInptWrapper ,.itemImage:hover + .selctImgInptRetouchWrapper { display: block; }

但是这三个都没用

Answer 1

尝试使用 ~ 符号而不是 + 符号

这有助于解释 https://www.w3schools.com/cssref/css_selectors.asp

.selctImgInptWrapper,
.selctImgInptRetouchWrapper {
    display:none;
}

.itemImage:hover ~ .selctImgInptWrapper {display:block;}
.itemImage:hover ~ .selctImgInptRetouchWrapper {display:block;}

此外，注意你的语法，因为你的类名似乎混合了单引号和双引号。

<div class="selctImgInptWrapper"> 

不是像下面那样，因为它可能会导致问题。

<div class='selctImgInptWrapper"> 

我还发现不使用驼峰式大小写让类更容易阅读。我倾向于将 id 保留为驼峰命名法。这也可能有帮助。

<div class="select-img-input-wrapper">