Question

当我申请上一页时，它不会翻转图像。

我有点坚持为什么它不起作用，我尝试使用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

你的css什么都不做，因为a中没有任何内容可以转换。

背景图片位于父级，a中没有内容或图片。尽管如此，我们知道变换工作正常但我们看不到任何东西。

Answer 2

从您的代码较少，看起来您的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";
}

图像不会与css一起翻转

2 个答案: