Question

此按钮的设计要求它具有线性渐变，但是当您将鼠标悬停在其上时，按钮应该变为平面颜色。主类看起来像这样，它似乎在我测试过的所有浏览器中都能找到。正如你所看到的，我也在使用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');
}

还有另一种更优雅的方法吗？

Answer 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也是如此）。虽然我不知道这2个解决方案中的哪一个不太适得其反，但如果我不得不猜测，我认为增加一个没有梯度的孩子会更好。

Answer 2

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

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

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

Answer 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 }

：在IE9中使用线性渐变悬停

3 个答案: