CODEWITHSUNDEEP
htmlcss
summu
summu

Reputation: 388

display more than one div on hover selector(image tag) using css

How to display two div on hover of image tag, My html looks like this

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

CSS code

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

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

this code works for only one class either selctImgInptWrapper or selctImgInptRetouchWrapper I am not able to include both class at once

I tried

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

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

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

But none of the three worked

UI for the above

Upvotes: 0

Views: 45

Answers (3)

Zuber
Zuber

Reputation: 3473

You can try solution also

  • You can wrap all elements including img in one div. here i am using main-container
  • Set position: relative to .main-container
  • Wrap checkboxes in one div. here i have used input-container for that. set display: none to it
  • Set display: block to input-container on hover of 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>

Upvotes: 0

Al-76
Al-76

Reputation: 1878

Try the ~ symbol instead of the + symbol

This helps explain https://www.w3schools.com/cssref/css_selectors.asp

.selctImgInptWrapper,
.selctImgInptRetouchWrapper {
    display:none;
}

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

In addition, be careful with your syntax as you seem to have a mix of single and double quotations on your class names. 

<div class="selctImgInptWrapper">

Not as below as it could cause issues. 

<div class='selctImgInptWrapper">

Also I find not using camel case for classes easier to read. I tend to leave the camelCase for the ids. This may also help. 

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

Upvotes: 1

user9787714
user9787714

Reputation: 1

Try the ~ selector

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

I recommend you to wrap the img and divs in a container div and class

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

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

Sorry if anything might be wrong. I am posting this from my phone

Upvotes: 0

Related Questions