六角形のグリッドを作成しようとしています。ファンキーなエフェクトとして、css トランスフォーム エフェクトを使用します。FireFox ではこれは正しく機能しているように見えますが、Google Chrome では上部の 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/のリンクを使用して、[実行] ボタンをクリックします。右下に結果が表示されます。
ホバリングを修正するための提案はありますか? 前もって感謝します!