我正在尝试制作六边形网格。为了获得时髦的效果，我使用了 css 变换效果。在 FireFox 中，这似乎运行正常，但在 Google Chrome 中，top div 似乎没有提供预期的悬停效果。这是我使用的代码:
<html>
<head>
<style>
body{
margin:0;
}
.board{
width: 550px;
height: 300px;
margin: 20px auto;
-webkit-transform: perspective(700px) rotateX(65deg);
-moz-transform: perspective(700px) rotateX(65deg);
-ms-transform: perspective(700px) rotateX(65deg);
-o-transform: perspective(700px) rotateX(65deg);
transform: perspective(700px) rotateX(65deg);
padding:10;
}
.hex-row {
clear: left;
}
.hex-row.even {
margin-left: 53px;
}
.hex:hover{
background: #446;
}
.hex:hover:before{
border-bottom: 30px solid #446;
}
.hex:hover:after{
border-top: 30px solid #446;
}
.hex:before {
content: " ";
width: 0; height: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
position: absolute;
top: -30px;
}
.hex {
width: 104px;
height: 60px;
background-color: #6C6;
position: relative;
float:left;
margin-top: 32px;
margin-left: 3px;
margin-bottom: 3px;
}
.hex:after {
content: " ";
width: 0;
position: absolute;
bottom: -30px;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex.disabled{
background-color: #888;
}
.hex.disabled:before {
border-bottom: 30px solid #888;
}
.hex.disabled:after {
border-top: 30px solid #888;
}
</style>
</head>
<body>
<div class="board">
<div class="hex-row">
<div class="hex disabled"></div>
<div class="hex disabled"></div>
<div class="hex"></div>
<div class="hex disabled"></div>
<div class="hex disabled"></div>
</div>
<div class="hex-row even">
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
</div>
<div class="hex-row">
<div class="hex disabled"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex disabled"></div>
</div>
<div class="hex-row even">
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
</div>
<div class="hex-row">
<div class="hex disabled"></div>
<div class="hex disabled"></div>
<div class="hex"></div>
<div class="hex disabled"></div>
<div class="hex disabled"></div>
</div>
</div>
</body>
</html>
要快速试用，您可以使用以下链接:http://jsfiddle.net/a55eF/2/然后单击运行按钮。您将在右下角看到结果。
有人对修复悬停有什么建议吗？ 提前致谢!
最佳答案
主体阻止了悬停事件，这是我在 firefox 和 google chrome 之间看到的区别。添加高度时:0px；对于 body 元素，它确实会正确触发悬停事件。
关于css - 我如何在 Chrome 中的 css 转换顶部使用 DIV 的悬停效果？ (在 FF 中有效)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15345436/