Crazy Div:hover sequence flickering/not working in all browsers

UPDATE: here is a example of my code below: LIVE EXAMPLE Works best in Safari, at least on my comp.

So I'm trying to create a crazy hover sequence (since something was designed without web in mind) but I'm getting crazy flicker when the hovers fire. The hovers kind of work in Safari, but flicker like crazy in FireFox and I have yet to check IE. See my code below:

<html>
    <head>
    </head>
    <style>
        /* Melon */
        #melon_products1_a {
            position:absolute; 
            width: 140px; height: 220px; 
            top:320px; left: 195px; 
        }
        #melon_products1_a:hover + #melon_products1 {
            display:block; 
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px;
        }
        #melon_products1 {
            display:none; 
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px;
        }
        #melon_products2_a {
            position:absolute; 
            width: 130px; height: 100px; 
            top:535px; left: 275px;
        }
        #melon_products2_a:hover + #melon_products2 {
            display:block; 
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px;
        }
        #melon_products2 {
            display:none; 
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px;
        }
        #melon_products3_a {
            position:absolute; 
            width: 170px; height: 290px; 
            top:250px; left: 330px;
        }
        #melon_products3:hover + #melon_products3 {
            display:block; 
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px;
        }
        #melon_products3 {
            display:none; 
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px;
        }
        #melon_products {
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px; 
            background:url(images/melon/melon_products.jpg);
        }
    </style>
    <body>
        <div id="melon_products"></div>
        <div id="melon_products1_a"></div>
        <div id="melon_products1">
            <img src="images/melon/melon_product1.jpg" width="466" height="455" />
        </div>
        <div id="melon_products2_a"></div>
        <div id="melon_products2">
            <img src="images/melon/melon_product2.jpg" width="466" height="455" />
        </div>
        <div id="melon_products3_a"></div>
        <div id="melon_products3">
            <img src="images/melon/melon_product3.jpg" width="466" height="455" />
        </div> 
    </body>
</html>

Answers


It was pretty difficult without images (or a working example), but I think I figured out what you're looking for. I've provided some sample code and a link to an online example.

HTML
<div id="melon_products">
 <div class="hover_product" id="melon_products1"></div>
 <div>
  <div>Product 1</div>
 </div>
 <div class="hover_product" id="melon_products2"></div>
 <div>
  <div>Product 2</div>
 </div>
 <div class="hover_product" id="melon_products3"></div>
 <div>
  <div>Product 3</div>
 </div>
 <div class="default_info">Hover to learn more</div>
</div>
CSS
<style type="text/css">
/* Basic hover effect */
.hover_product {position:absolute;background:rgba(255,255,0,.5);}
.hover_product:hover {z-index:2;}
.hover_product + div {display:none;position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;background:rgba(255,0,255,1);}
.hover_product:hover + div {display:block;}
.hover_product:hover ~ .default_info {display:none;}

 /* Using this as placeholder for img */
.hover_product > div > div {width:466px;height:455px;display:inline-block;}

/* Product positioning */
#melon_products1 {width: 140px; height: 220px; top:100px; left: 75px; }
#melon_products2 {width: 130px; height: 100px; top:315px; left: 155px; }
#melon_products3 {width: 170px; height: 290px; top:30px; left: 185px; }
.default_info {width:100px;height:150px;position:absolute;right:10px;top:10px;}

/* Wrapper positioning */
#melon_products {position:relative; width: 466px; height: 455px; background:rgba(255,0,0,.5); }
</style>
Online example

Need Your Help

Will two programs using SqlAlchemy conflict when trying to access the same table (SQLite)?

python sqlite orm sqlalchemy declarative

I'm going to have two independent programs (using SqlAlchemy / ORM / Declarative)

CoreData: How do you migrate an unversioned store?

ios macos core-data core-data-migration

So I'm working on a project which has been published to users. Before I put my hand on this project, this project has an 1.0 and an 2.0 version, v2.0 modified the data model of core data, but the o...