当我将类分组不翻转图像。
我有点坚持为什么它不起作用，我在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&driftPage=1" class="driftPageprev prev"></a>
<a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&driftPage=1" class="driftPagenext next"></a>
</div>从您的代码少，看来您的html必须是这样。
<div class="pbtn next">
<a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&driftPage=1" class="driftPagenext"></a>
</div>
<div class="pbtn prev">
<a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&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";
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句