Question

我正在使用hover.css中的悬停效果。除Opera外，它在所有浏览器中都可以正常工作。

当我删除属性时，它似乎仅在Opera中起作用：

-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);

但是，它在Firefox中不起作用。

我还创建了这个JSFiddle：

https://jsfiddle.net/ta4sju8n/20/

但是似乎在那儿工作得很好...

HTML：

<ul>
  <li><a href="#">Hover me</a></li>
  <li><a href="#">Hover me</a></li>
  <li><a href="#">Hover me</a></li>
</ul>

SCSS：

body {
  background-color: black;
  color: white;
}

ul {
  list-style: none;
  li {
    padding: 10px;  
    a {
      display: inline-block;
      vertical-align: middle;
      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      position: relative;
      overflow: hidden;
      color: white;
      margin-top: 10px;
      margin-bottom: 10px;
      padding-bottom: 8px;
      text-decoration: none;
      /* Border bottom animation */ 
      &:after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 100%;
        bottom: 0;
        background: white;
        height: 1px;
        -webkit-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
      }
      &:hover:after {
        right: 0;
      }
    }
  }
}

有人可以在这里帮助我吗？

Answer 1

更新：

问题已解决。我删除了perspective(1px)，现在属性transform如下所示：

-webkit-transform: translateZ(0);
transform: translateZ(0);

最终代码： HTML：

<ul>
  <li><a href="#">Hover me</a></li>
  <li><a href="#">Hover me</a></li>
  <li><a href="#">Hover me</a></li>
</ul>

SCSS：

body {
  background-color: black;
  color: white;
}

ul {
  list-style: none;
  li {
    padding: 10px;  
    a {
      display: inline-block;
      vertical-align: middle;
      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      position: relative;
      overflow: hidden;
      color: white;
      margin-top: 10px;
      margin-bottom: 10px;
      padding-bottom: 8px;
      text-decoration: none;
      /* Border bottom animation */ 
      &:after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 100%;
        bottom: 0;
        background: white;
        height: 1px;
        -webkit-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
      }
      &:hover:after {
        right: 0;
      }
    }
  }
}

Hover.css边框底部效果在Opera中无法正常工作

1 个答案: