Geek Answers Handbook

How can I use the hover effect for the DIV at the top of my CSS transform in Chrome? (in FF it works)

I am trying to create a grid of hexagons. For funky effect, I use css conversion effects. In FireFox, this seems to work correctly, but in Google Chrome, the top div does not seem to give the expected hover effect. Here is the code I'm using:

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

To quickly use this feature, you can use the following link: http://jsfiddle.net/a55eF/2/ and click the "Run" button. You will see the result in the lower right corner.

Does anyone have any suggestions for fixing the freeze? Thanks in advance!

+4
source share
2 answers

The body prevents the hover event, that is, the difference between Firefox and Google Chrome. When you add height: 0px; to the body element, it does indeed trigger a hover event.

+2
source

I changed height to 10px and rotations to 75deg:

http://jsfiddle.net/a55eF/5/

It seems that you want to combine with these parameters, especially with height, to get the desired effect. It seems that the lower the height, the more top line you can move towards yourself.

+1
source

More articles:


All Articles