更新:下面是我的代码示例:LIVE EXAMPLE在 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>
最佳答案
如果没有图像(或工作示例)，这是非常困难的，但我想我知道你在找什么。我提供了一些示例代码和一个在线示例的链接。
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>
在线示例
关于css - 疯狂的分区 :hover sequence flickering/not working in all browsers，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10181120/