html - 图像不会用 css 翻转

Question

当我应用 prev 类时，它不会翻转图像。

我有点困惑为什么它不起作用，我在 Chrome、Firefox 和 IE 上尝试过，但都不起作用。

.pbtn {
  background-image: url('../../images/linkpil.png');
  background-repeat: no-repeat;
  display: inline-block;
  float: left;
  background-position: center center;
  &.first {
    display: none;
  }
  &.next {
    background-color: #C9E2E5;
  }
  .prev {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
  }
  a {
    overflow: hidden;
    text-indent: -9999px; //hide text
    height: 15px;
    width: 15px;
    display: inline-block;
  }
}

<div class="pbtn">
  <a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&amp;driftPage=1" class="driftPageprev prev"></a>
  <a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&amp;driftPage=1" class="driftPagenext next"></a>
</div>

Answer 1

从你的 less 代码看来，你的 html 必须是这样的。

<div class="pbtn next">
  <a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&amp;driftPage=1" class="driftPagenext"></a>
</div>
<div class="pbtn prev">
  <a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&amp;driftPage=1" class="driftPageprev"></a>
</div>

并替换

&.next {
background-color: #C9E2E5;
}
.prev {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

与:

&.next {
background-color: #C9E2E5;
}
&.prev {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}