Question

有一个旋转的div。：悬停式不在背面工作（实际上并没有尝试正面）。 cursor：指针也不起作用。我猜，必须是同样的理由。

一小段代码

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

这里有一个完整的小提琴

http://jsfiddle.net/ejtLv49y/

提前致谢！

Answer 1

backface visibility导致了问题（请注意，当文字被翻转时，您无法选择该文字）。如果你删除它，它似乎工作。

这是一个小提琴：

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很受欢迎，以防止＆＃34;闪烁＆＃34;。如果您正在使用它，则可以应用仅为桌面禁用该样式的类...

：悬停样式不起作用

1 个答案: