时间戳

首页 > 解决方案 > 使用 css 在悬停选择器（图像标签）上显示多个 div

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

问题描述

如何在图像标签悬停时显示两个 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; }

但是这三个都没有工作

上面的用户界面

标签： htmlcss

解决方案

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

这有助于解释 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">

此外，我发现不使用骆驼案例来更容易阅读的课程。我倾向于将 camelCase 留给 ids。这也可能有所帮助。

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

推荐阅读