Question

我有一个列表项，每个都有一个伪边框设置，我的悬停效果在谷歌浏览器中有效但在safari中失败，它们都使用相同的渲染引擎，为什么它不起作用？

.page-content ol li:before {
      background: #338ec9;
      background: url(../images/tie.png) no-repeat 0;
      margin-bottom: 1em;
      padding-left: 35px;
      font-size: 1.2em;

  position: absolute;    
  left: 0;
  top: -2px;

  height: 25px;
  width: 17px;
  line-height: 25px;

  font-size: 12px;
  text-align: center;

  border-radius: 2em;
  color: transparent;
  transition: 0.6s;     
}

.page-content ol li:hover:before {        
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}

Answer 1

和

-webkit-transition:0.6s;

到

.page-content ol li:before

应该做的诀窍是： http://www.w3schools.com/css/css3_transitions.asp

Webkit转换旋转on hover伪不能在safari中工作

1 个答案: