Question

我正在尝试制作一个CSS3按钮。

问题：当我将鼠标悬停在按钮上时，按钮底部会显示一个白色的东西。我将此问题缩小到background-position: 0 -15px; CSS属性，但是我如何调整它以使鼠标悬停的梯度发生变化，但避免出现白色的东西？谢谢！

JSfiddle：http://jsfiddle.net/7LT35/

Answer 1

“白色的东西”只是按钮的背景颜色。

渐变图像是按钮的确切大小。所以，如果你移动它，当然它不会再覆盖按钮了。

就个人而言，我建议只做一个渐变图像并用它做你想做的事。

PS。请不要使用IE“hacks”并过滤属性，除非您实际测试它们以确保它们按照您的意图执行操作。

Answer 2

您必须更改background-size值！插入.btn：

  background-size:1px 53px;

并调整渐变！比它（希望）会起作用！结果如下：http://jsfiddle.net/7LT35/6/ 但我认为这不是正确的梯度！

Answer 3

白色是你的背景渐变。你告诉元素只在悬停时向上移动15px。

您还应该将转换放在静态类而不是悬停的psuedo元素上。

.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  *margin-left: .3em;
  ..more styles

  -webkit-transition: background-position 0.1s linear;
     -moz-transition: background-position 0.1s linear;
      -ms-transition: background-position 0.1s linear;
       -o-transition: background-position 0.1s linear;
          transition: background-position 0.1s linear;
}

.btn:hover {
  color: #333333;
  text-decoration: none;

 background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
 background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: linear-gradient(top, #ffffff, #e6e6e6);
 background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);

}

这使得悬停时出现白色/灰色渐变。不确定你想要做什么过渡。

查看fiddle

奇怪的白色东西出现在onmouseover CSS按钮上

3 个答案: