0

更新：下面是我的代码示例：现场示例在 Safari 中效果最好，至少在我的比较中。

所以我正在尝试创建一个疯狂的悬停序列（因为某些东西的设计没有考虑网络）但是当悬停触发时我会变得疯狂闪烁。悬停在 Safari 中工作，但在 FireFox 中像疯了一样闪烁，我还没有检查 IE。请参阅下面的代码：

<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>
4

1 回答 1

0

没有图像（或工作示例）非常困难，但我想我知道你在找什么。我提供了一些示例代码和一个在线示例的链接。

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>

在线示例

于 2012-04-16T21:01:46.410 回答