CSS3 3D动画无法使用：悬停属性

Question

I'm not a web developer, but I was dabbling with 3D CSS transformations and animations and found that they didn't interact with :hover the way I hoped or expected. I wasn't able to readily find any disclaimer that this is a known problem, so I'm wondering if I'm just doing something wrong.

To reproduce the problem simply, start from this demo 3D cube animation here:

http://cssdeck.com/labs/simple-css3-3d-cube

Add this to the bottom of the style section:

#cube div:hover {
  background-color: white;
}

I'm looking at that, using Chrome. I was hoping that, as both the cube rotated and the cursor moved (or didn't) the front-facing side containing the cursor would have a white background. But in practice that doesn't happen properly. If I scroll the cursor over the animation it picks out the correct panel to highlight but then it often fails to update when it should. Most noticeably, if I stop moving the mouse it doesn't seem to detect any change in what element the cursor might be hovering over.

Is this a known shortcoming? Does anyone have a solution?

Answer 1

It appears there's a difference in Chrome's Webkit engine vs Firefox's Gecko engine. Firefox continually runs to check a hover status, while Chrome does not.

I tested it in Chrome and Safari (both run Webkit) and they have similar results. They do not update the hover state if you keep the mouse still. Firefox, on the other hand, continually checks the hover area when the mouse remains in the same place.