CODEWITHSUNDEEP
htmlcss
WhoIsWardLarson
WhoIsWardLarson

Reputation: 13

Flickering issue when overlaying a div on hover of another div

Apologies if the title is confusing. Basically I've got a div which, on hover, activates a second div to display:block, displaying it above the underlying div. Works well except for the flickering I experience when moving the cursor over the second div.

Another minor issue is that the second div disappears for a fraction of a second when it's clicked.

Check this jsFiddle for an example: http://jsfiddle.net/uB82S/1/

Upvotes: 1

Views: 5555

Answers (3)

Itang Sanjana
Itang Sanjana

Reputation: 717

Just use the correct selector. See http://jsfiddle.net/uB82S/7/

/*
.feature-product-img:hover + .main-img {
    display:block;
}
.feature-product-img + .main-img:active {
    display:block;
}
* replace with below ..
*/
#img-container:hover div#main-img {
    cursor: pointer;
    display: block;
}

Upvotes: 0

Huangism
Huangism

Reputation: 16438

You can try to put the hover on the product container instead. This way it provides a more stable way for the main image to show

http://jsfiddle.net/uB82S/9/

.product-main {
    display: inline-block;
}
.product-main:hover .main-img{
    display:block;
}

.main-img:active {
    display:block;
}

Upvotes: 0

Jacques
Jacques

Reputation: 3774

**

View this Fiddle

**

Change your HTML to be:

<div class="product-main">

   <div id="img-container" class="img-container">

   <div class="feature-product-img" id="feature-product-img" style="display: block;">
      <a href="http://www.spinnakerextreme.com/2012-tt-isle-of-man-official-review-blu-ray-and-dvd.html" title="2012 TT Isle of Man Official Review Blu Ray and DVD">
           <img class="product-img" src="http://www.spinnakerextreme.com/media/catalog/product/p/r/product_2_bg.png" alt="2012 TT Isle of Man Official Review Blu Ray and DVD" />
      </a>
      ****move this inside the feature-product div****
     <div class="main-img" id="main-img">
        <a href="http://www.spinnakerextreme.com/2012-tt-isle-of-man-official-review-blu-ray-and-dvd.html" title="2012 TT Isle of Man Official Review Blu Ray and DVD">
            <img src="http://www.spinnakerextreme.com/media/catalog/product/cache/1/small_image/9df78eab33525d08d6e5fb8d27136e95/t/t/tt_man_review_1.png" height="184" id="main-image-img"/>
        </a>
     </div>
     ************
 </div>
</div>
<div class="product-description">
  <a href="http://www.spinnakerextreme.com/2012-tt-isle-of-man-official-review-blu-ray-and-dvd.html" title="2012 TT Isle of Man Official Review Blu Ray and DVD">
      2012 TT Isle of Man Official Review Blu Ray and DVD
   </a>
</div>

Change css to:

.feature-product-img:hover > .main-img{
 display:block;
}

.feature-product-img .main-img:active {
display:block;
}

Upvotes: 3

Related Questions