:hover 在 IE9 中使用线性渐变答案

【问题标题】：:hover with linear gradients in IE9:hover 在 IE9 中使用线性渐变
【发布时间】：2013-04-01 22:45:24
【问题描述】：

此按钮的设计要求它具有线性渐变，但是当您将鼠标悬停在它上面时，该按钮应该变为纯色。主类看起来像这样，它似乎在我测试过的所有浏览器中都可以正常工作。如您所见，我也在使用 PIE 使渐变在较低的 IE 浏览器中正常工作。

.mvcView.button.texture {
        background-color: #F34914;
        border-width: 0px;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        padding: 4px;

        min-width: 40px;
        overflow:visible;   /*overflow visible is required for ie 7 to respect min-width and doesn't seem to affect other browsers.  */
        width : auto;
        vertical-align: middle;

        font-family: Arial;
        background-color: #F34914;
        background: -webkit-linear-gradient(top, #F34914, #8A2800);
        background: -moz-linear-gradient(top, #F34914, #8A2800);
        background: -ms-linear-gradient(top, #F34914, #8A2800);
        background: -o-linear-gradient(top, #F34914, #8A2800);
        background: linear-gradient(top, #F34914, #8A2800);
       -pie-background: linear-gradient(#F34914, #8A2800);

       behavior: url('/PIE.htc');
}

对于 webkit 浏览器，以下 css 将颜色更改为在鼠标悬停时变平：

.mvcView.button.texture:hover {
    background: #AA3200;
}

对于 IE9，只有当我这样做时，悬停才有效：

.mvcView.button.texture:hover {
    background: #AA3200;
    background-color: #AA3200;
    -pie-background: linear-gradient(#AA3200, #AA3200);

    behavior: url('/PIE.htc');
}

还有其他更优雅的方法吗？

【问题讨论】：

标签： css internet-explorer-9 hover css3pie linear-gradients

【解决方案1】：

似乎这是一个 PIE 错误。我有同样的问题。如果您将 PIE 行为分配给 css 类或 id，看起来您不能只是 #id:hover{background:#some-color;}，因为它也需要 -pie-background，例如您已经将其定义为渐变，因此它正常工作在所有浏览器上，除了 IE，因为 PIE 是专门为此设计的。一种解决方法是使用 PIE 设置父级样式（添加圆角、阴影、渐变），并添加一个继承父级宽度和高度的子级，并使用或不使用 PIE 和background:none;（无渐变）对其进行样式设置。然后为孩子简单地做.child:hover{background:#some-solid-color;}。因此，如果它是您正在设计的按钮，正常时，它将填充您定义的任何父饼图渐变，并且当悬停时，由于子“覆盖”（可以这么说）父，它将显示纯色。当然，当深度嵌套 div 或任何其他元素时，这违背了我的更好判断。另一方面，您在上面为 IE9 发布的解决方案也可以解决问题（IE 6-8 也是如此）。虽然我不知道这两种解决方案中的哪一种会适得其反，但如果我不得不猜测一下，我认为添加一个无梯度的孩子会更好。

【讨论】：

在进一步试验 PIE 后，如果你使用 PIE 2.0 beta，你可以这样做#element:hover{-pie-background:#some-solid-color;}（不需要渐变）。你仍然必须使用 -pie 前缀。
我无法再访问该代码来尝试一下，看看您是否正确，但我怀疑您是正确的！感谢您解开谜团。

【解决方案2】：

渐变是某种图像，所以如果你设置渐变，你可以这样做

.button {
    background-image: linear-gradient(#F34914, #8A2800);
}

.button:hover {
    background-image: none;
    background-color: #AA3200;
}

【讨论】：

【解决方案3】：

/** DON'T FORGET ABOUT <element class="ahover"><span>Text</span></a> IF U USE TEXT ELEMENT *//

.ahover {
display: block;
/** text-indent: -999em; ** if u use only only img **/
position: relative;
}
.ahover:after {
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all 0.5s ease 0s;
width: 100%;
z-index: 1;
}
.ahover:hover:after {
opacity: 1;
}
.ahover span {
display: block;
position: relative;
z-index: 3 }

【讨论】：