3

我正在创建一个 SASS mixin，它可以让我获取社交媒体图标的精灵表并显示它们，但是当它悬停在背景位置时我遇到了问题，这是 SASS 代码：

@mixin social-button($imgurl,$xpos,$ypos,$height,$width) {
  background-image: url($imgurl);
  background-position: $xpos $ypos;
  display: block;
  float: left;
  height: $height;
  width: $width;    

  &:hover {
    background-position: 0px -$height;
  }

  & span {
    position: absolute;
    top: -999em;
  }
}

我的包括：

a.facebook {
  @include social-button("../img/social-buttons.png",0px,0px,26px,26px);
}

如果您想查看/使用精灵表，我已将其上传到此处：http: //i49.tinypic.com/2evtbwp.png

这也是HTML：

<a class="facebook" href="#"><span>Facebook</span></a>

本质上，悬停的 CSS 输出显示如下：

a.facebook:hover {
  background-position: -26px;
}

在 Firebug 中显示如下：

a.facebook:hover {
    background-position: -26px center;
}

任何帮助都非常感谢，我很困惑我在这一点上做错了什么..谢谢！

PS。我将创建其中的 5 个，所以我不介意创建一个可以为我自动生成的循环，但目前这并不是什么大不了的事，只需要先让悬停工作！

4

1 回答 1

8

当您将变量更改为负数时，您必须在变量周围添加括号，否则它只会进行数学运算（0px - $height）：

background-position: 0px (-$height);

您可能也想修复0px.

于 2012-12-12T01:29:54.667 回答