更新：以下是我的代码示例：LIVE EXAMPLE在Safari中效果最佳，至少在我的comp上。
所以我正在尝试创建一个疯狂的悬停序列（因为某些东西是在没有网络的情况下设计的）但是当徘徊时我会疯狂地闪烁。在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>
答案 0 :(得分：0)
没有图像（或工作示例）这很困难，但我想我找出了你想要的东西。我提供了一些示例代码和一个在线示例的链接。
<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>
<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>