CODEWITHSUNDEEP
htmlcss
Sumit patel
Sumit patel

Reputation: 3903

div hover Second div flicker effect issue

Notes: I tried all questions & answers related this topic. Additionally and I tried related questions and try to solve it but no the success. So please read my question thoroughly.

I try to one class hover then one class effect blur and the second div visible but some most flicker is there how to solve this issue how can stop flicker.

I want to stop Flicker hover div

Notes: Please Run my Example Then Can you understand what is issue

code 

.root {
  width: 300px;
  border: 1px solid black;
  padding: 5px;
  height: 300px;
  position: relative;
}

.one,
.two {
  width: 250px;
  height: 250px;
  border: 1px solid black;
  position: absolute;
  top: 5px;
  left: 5px;
}

.one:hover {
  -webkit-filter: blur(13px);
  -moz-filter: blur(13px);
  -o-filter: blur(13px);
  -ms-filter: blur(13px);
  filter: blur(13px);
}

.one:hover+.two {
  display: block;
}

.two {
  display: none;
}

.changeoreditdiv {
  position: absolute;
  top: 58px;
  left: 87px;
  width: 150px;
}

.changeoreditdiv div {
  padding: 10px;
  width: 52px;
  height: 16px;
  border: 1px solid red;
  background: #ccc;
}
<div class="root">
  <div class="one">
    <img src="http://1u5ra23nlkv83fo2ig1vo38m.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Colorful-Apple-Wallpaper.jpg" width="100%" height="100%" />
  </div>
  <div class="two">
    <div class="changeoreditdiv">
      <div> Remove</div>
      <br>
      <br>
      <div> Change </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 125

Answers (2)

Bhuwan
Bhuwan

Reputation: 16855

The Flickering issue is happening because when you hover on .one div, .two div comes up(display: block) and hover css removed from .one, resulting .two div is again display: none and your .one hover starts again and this process happens again and again(never ending process).

I would suggest that take .two div inside your .one div and then apply hover effect. Check snippet below

.root {
  width: 300px;
  border: 1px solid black;
  padding: 5px;
  height: 300px;
  position: relative;
}

.one,
.two {
  width: 250px;
  height: 250px;
  border: 1px solid black;
  position: absolute;
  top: 5px;
  left: 5px;
}

.one:hover img {
  -webkit-filter: blur(13px);
  -moz-filter: blur(13px);
  -o-filter: blur(13px);
  -ms-filter: blur(13px);
  filter: blur(13px);
}

.one:hover .two {
  display: block;
}

.two {
  display: none;
}

.changeoreditdiv {
  position: absolute;
  top: 58px;
  left: 87px;
  width: 150px;
}

.changeoreditdiv div {
  padding: 10px;
  width: 52px;
  height: 16px;
  border: 1px solid red;
  background: #ccc;
}
<div class="root">
  <div class="one">
    <img src="http://1u5ra23nlkv83fo2ig1vo38m.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Colorful-Apple-Wallpaper.jpg" width="100%" height="100%" />
    <div class="two">
      <div class="changeoreditdiv">
        <div>Remove</div>
        <br>
        <br>
        <div>Change</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

In your code, there is a problem with hover in and hover out.

While hovering .one, .two show up and hover removed from .one because .two is in between one and cursor as a layer.

Now as per condition .one:hover+.two {display: block;} .two hides, and this process is running endless.

To avoid this, you can wrap both divs in parent div and give hover state to it.

.root {
  width: 250px;
  border: 1px solid black;
  height: 250px;
  position: relative;
}

.one,
.two {
  width: 250px;
  height: 250px;
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: 0;
}

.root:hover .one {
  -webkit-filter: blur(13px);
  -moz-filter: blur(13px);
  -o-filter: blur(13px);
  -ms-filter: blur(13px);
  filter: blur(13px);
}

.root:hover .two {
  display: block;
}

.two {
  display: none;
}

.changeoreditdiv {
  position: absolute;
  top: 58px;
  left: 87px;
  width: 150px;
}

.changeoreditdiv div {
  padding: 10px;
  width: 52px;
  height: 16px;
  border: 1px solid red;
  background: #ccc;
}
<div class="root">


  <div class="one">
    <img src="http://1u5ra23nlkv83fo2ig1vo38m.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Colorful-Apple-Wallpaper.jpg" width="100%" height="100%" />
  </div>
  <div class="two">
    <div class="changeoreditdiv">
      <div> Remove</div>
      <br>
      <br>
      <div> Change </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions