0

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

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

4

3 回答 3

2

似乎这是一个 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 也是如此）。虽然我不知道这两种解决方案中的哪一种会适得其反，但如果我不得不猜测一下，我认为添加一个无梯度的孩子会更好。

于 2013-10-01T19:57:59.410 回答
0

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

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

.button:hover {
    background-image: none;
    background-color: #AA3200;
}
于 2013-09-16T09:55:07.527 回答
0 
/** 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 }
于 2014-01-03T10:17:48.527 回答