奇怪的白色东西出现在鼠标悬停 CSS 按钮上答案

【问题标题】：Strange white thing appear onmouseover CSS button奇怪的白色东西出现在鼠标悬停 CSS 按钮上
【发布时间】：2012-06-22 14:18:48
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

您必须更改background-size 的值！插入到 .btn 这个：

  background-size:1px 53px;

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

【讨论】：

【解决方案2】：

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

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

就个人而言，我建议只制作一个渐变图像，然后用它做你想做的事情。

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

【讨论】：

我正在使用 Twitter 引导程序中的 CSS 类。它适用于他们提供的 3 种尺寸。但是，当我更改按钮的大小时，我遇到了当前的问题。我想我可以改变按钮的背景颜色来摆脱白色的东西。

【解决方案3】：

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

您还应该将过渡放在静态类而不是悬停伪元素上。

.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

【讨论】：