使用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"> 

我还发现，对于易于阅读的类，不使用驼峰式大小写。我倾向于将camelCase留给ID。这也可能会有所帮助。

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

Answer 2

尝试〜选择器

https://www.w3schools.com/cssref/sel_gen_sibling.asp

我建议您将img和div包装在容器div和class

中

<div class="wrapper">
    <img>
    <div>...</div>
    <div>...</div>
</div>

<style>
    div.wrapper > img:hover ~ div {
        display: block;
    }
</style>

对不起，如果有什么问题。我是通过手机发布的

Answer 3

您也可以尝试解决方案

• 您可以将所有包含img的元素包装到一个div中。我在这里 使用main-container
• 将position: relative设置为.main-container
• 将checkboxes换成div。在这里我用过input-container 为了那个原因。设置display: none
• 在display: block上将input-container设置为hover main-container

img {
  max-width: 100%;
  vertical-align: middle;
}
.main-container {
  position: relative;
  max-width: 200px; /* You can change */
}
.input-container {
  position: absolute;
  display: none;
  background-color: rgba(0,0,0,0.5);
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
}
.main-container:hover .input-container{ display: block; }

<!-- Main Wrapper -->
<div class="main-container">
  <img class="itemImage" src="http://via.placeholder.com/500x500" slt="" />

  <!-- Checkbox wrapper -->
  <div class="input-container">
    <div class="selctImgInptWrapper"> 
      <input id="main" class="selctImgInpt" type="checkbox" value="" /> 
      <label for="main">Main</label>
    </div>
    <div class="selctImgInptRetouchWrapper"> 
      <input id="reTouch" class="selctImgInptRetouch" type="checkbox" value="">
      <label for="reTouch">Retouch</label>
    </div>
  </div>
</div>