jquery - :hover styles don't work

Question

有一个旋转的 div。 :hover 样式在背面不起作用(实际上没有在正面尝试)。游标:指针也不起作用。我猜，一定是同样的原因。

一小段代码

html

<div class="newport-view newport-view1" id="blja">view</div>

CSS

.newport-back .newport-view {
display: table;
margin:0 auto;
margin-top: 10px;
padding: 3px 6px;
text-align: center;
color: #fff;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer !important;
border: 3px solid #fff;
border-radius: 7px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
z-index:6;
}

.newport-back .newport-view:hover {
color: #1D89FC !important;
background-color: #fff !important;
}

还有一个完整的 fiddle

http://jsfiddle.net/ejtLv49y/

提前致谢!

Answer 1

backface visibility 导致了问题(请注意，翻转时您无法选择文本)。如果您删除它，它似乎可以工作。

这是一个 fiddle :

http://jsfiddle.net/ejtLv49y/2/

基本上，我删除了:

-webkit-backface-visibility: hidden

来自

.newport-item {
    transition: all 1s ease;
    -webkit-transform-style: preserve-3d;
    float: left;
}

不幸的是，我不确定这对移动设备有何影响。我知道 -webkit-backface-visibility 在防止“闪烁”方面很受欢迎。如果你为此使用它，你可以应用一个类来仅对桌面禁用该样式......