Question

我的元素在Chrome中无法正常工作（鼠标悬停在图标上方无效）。但是，firefox显示它很好。

http://i.stack.imgur.com/gpDHx.jpg

Codepen源码 http://codepen.io/anon/pen/lzkAb

我真的会感谢任何帮助家伙！你将节省我的时间谢谢！

Answer 1

transform属性在chrome中不起作用。你还需要在你的悬停上使用-webkit-transform，如下所示：

.opentime .timelineopening li .roundbox:hover { 
   transform: scale(1.15) ! important;
  -webkit-transform: scale(1.15) ! important;
  transition: all 250ms ease-in-out 0s ! important; 
}

（实际上，这段代码在我的代码中为我做了诀窍）。

此外，不建议使用这种复杂的选择器结构，也许简单的.roundbox:hover会这样做吗？

Answer 2

对于像safari和chrome这样的webkit浏览器，CSS变换和转换需要以-webkit-为前缀。

此处查看 PEN

.opentime .timelineopening li .roundbox:hover {
    -webkit-transform:scale(1.15) !Important;
    -webkit-transition: all 250ms ease-in-out 0s ! important;
    transform: scale(1.15) ! important;
    transition: all 250ms ease-in-out 0s ! important;
}
.opentime .timelineopening li .roundbox:hover .dayname {
    font-size: 0px;
    transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
}
.opentime .timelineopening li .roundbox:hover span.icon1 {
    opacity: 1;
    transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
}

使用Chrome浏览器时CSS头痛（a：悬停）。

2 个答案: