CODEWITHSUNDEEP
htmlcss
summu
summu

Reputation: 388

css hover div flickering

Well, my HTML looks like this, when I hover over the image the two checkboxes with a black background should be visible.

<img class='itemImage'/>
 <div class='hoverDisplay'> 
  <div class="selctImgInptWrapper big">
    <input class="selctImgInpt" type="checkbox" value="">
  </div>
  <div class="selectWrapperImgRetouch big">
    <input class="selctImgRetouch" type="checkbox" value="">
  </div>
</div>

My CSS

.hoverDisplay {
 height: 75px;
 font-size: 0.80rem;
 background-color: rgba(44, 44, 44, 0.3);
 background: rgba(44, 44, 44, 0.3);
 color: #ffffff;
 width: 95%;
 bottom: 8px;
 position: absolute;
 padding: 2px 5px;
 display: none; }

.hoverDisplay .selctImgInptWrapper {
 bottom: 50px;
 position: absolute;
 padding: 2px 5px;
}

.hoverDisplay .selectWrapperImgRetouch {
 bottom: 30px;
 position: absolute;
 padding: 2px 5px; }

.itemImage:hover ~ .hoverDisplay {
  display: block; }

It works fine when I hover on the image, the two checkboxes are visible, the problem starts when I hover on the checkboxes it starts to flicker I am not able to figure out the false scenario here.

When I move my cursor to the black are which is hoverDisplay class it starts to flicker and I am not able to check any checkboxes. While moving my

enter image description here

Upvotes: 0

Views: 1603

Answers (2)

Mihai T
Mihai T

Reputation: 17687

The problem is that you show the checkboxes when you hover over the image. And then when you hover the checkboxes ( because they are not inside the image ( they are impossible to be) ) you hover out the image and css tries to hide them. But checkboxes are on top of the image, so the flickering happens.

You basically hover in and out the image in the same time.

One solution would be to wrap the img and checkboxes in a div and show the checkboxes when you hover over the div not just the img.

.img-container {
  position:relative;
  width:350px;
}

.hoverDisplay {
  height: 75px;
  font-size: 0.80rem;
  background-color: rgba(44, 44, 44, 0.3);
  background: rgba(44, 44, 44, 0.3);
  color: #ffffff;
  width: 95%;
  bottom: 8px;
  position: absolute;
  padding: 2px 5px;
  display: none;
}

.hoverDisplay .selctImgInptWrapper {
  bottom: 50px;
  position: absolute;
  padding: 2px 5px;
}

.hoverDisplay .selectWrapperImgRetouch {
  bottom: 30px;
  position: absolute;
  padding: 2px 5px;
}

.img-container:hover .hoverDisplay {
  display: block;
}
<div class="img-container">
<img class="itemImage" src="http://via.placeholder.com/350x150">
<div class='hoverDisplay'>
  <div class="selctImgInptWrapper big">
    <input class="selctImgInpt" type="checkbox" value="">
  </div>
  <div class="selectWrapperImgRetouch big">
    <input class="selctImgRetouch" type="checkbox" value="">
  </div>
</div>
</div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272842

Simply because you will loss the hover when you want to use the input as you are no more hovering the image but another element which is a sibling. To avoid this add another property to keep the display:block state:

.itemImage:hover ~ .hoverDisplay,
 .hoverDisplay:hover {
  display: block; 
}

Upvotes: 1

Related Questions