CSS渐变会阻止您添加:hover效果

Question

CSS渐变会阻止您添加:hover效果

3

我正在尝试创建一组按钮，我已经创建了标准按钮，并且当然想要悬停效果，但是我现在的做法似乎渐变不会改变为悬停状态。

.sqaure-blue-btn {
    border: 1px solid #2f78a9; /* stroke */
    background-color: #3999d7; /* layer fill content */
    -moz-box-shadow: inset 0 1px 1px #82cdff; /* inner shadow */
    -webkit-box-shadow: inset 0 1px 1px #82cdff; /* inner shadow */
    box-shadow: inset 0 1px 1px #82cdff; /* inner shadow */
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzODViYyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhOWFkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
    background-image: -moz-linear-gradient(bottom, #3385bc 0%, #3a9ada 100%); /* gradient overlay */
    background-image: -o-linear-gradient(bottom, #3385bc 0%, #3a9ada 100%); /* gradient overlay */
    background-image: -webkit-linear-gradient(bottom, #3385bc 0%, #3a9ada 100%); /* gradient overlay */
    background-image: linear-gradient(bottom, #3385bc 0%, #3a9ada 100%); /* gradient overlay */
}
.sqaure-blue-btn:hover {
    border: 1px solid #2f78a9; /* stroke */
    background-color: #3b9ddd; /* layer fill content */
    -moz-box-shadow: inset 0 1px 1px #82cdff; /* inner shadow */
    -webkit-box-shadow: inset 0 1px 1px #82cdff; /* inner shadow */
    box-shadow: inset 0 1px 1px #82cdff; /* inner shadow */
}

有人知道为什么吗？

示例: http://jsfiddle.net/dpUaL/

- user2598957

一个小工具会很有用。 - Brewal

这很不可能是问题所在，因为它同时影响悬停和非悬停状态，但是你在选择器中拼写了"square" 错误。 - Ed Daniel

http://jsfiddle.net/dpUaL/ There - user2598957

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Novocaine · Accepted Answer

因为您在标准属性中设置了背景图片，但在:hover状态下只设置了background-color，所以它不会覆盖图片。

Change background-color: #3b9ddd; to background: #3b9ddd;

.sqaure-blue-btn {
    height: 50px;
    border: 1px solid #2f78a9;
    /* stroke */
    background-color: #3999d7;
    /* layer fill content */
    -moz-box-shadow: inset 0 1px 1px #82cdff;
    /* inner shadow */
    -webkit-box-shadow: inset 0 1px 1px #82cdff;
    /* inner shadow */
    box-shadow: inset 0 1px 1px #82cdff;
    /* inner shadow */
    background-image: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzODViYyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhOWFkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
    /* gradient overlay */
    background-image: -moz-linear-gradient(bottom, #3385bc 0%, #3a9ada 100%);
    /* gradient overlay */
    background-image: -o-linear-gradient(bottom, #3385bc 0%, #3a9ada 100%);
    /* gradient overlay */
    background-image: -webkit-linear-gradient(bottom, #3385bc 0%, #3a9ada 100%);
    /* gradient overlay */
    background-image: linear-gradient(bottom, #3385bc 0%, #3a9ada 100%);
    /* gradient overlay */
}
.sqaure-blue-btn:hover {
    border: 1px solid #2f78a9;
    /* stroke */
    background: #3b9ddd;
    /* layer fill content */
    -moz-box-shadow: inset 0 1px 1px #82cdff;
    /* inner shadow */
    -webkit-box-shadow: inset 0 1px 1px #82cdff;
    /* inner shadow */
    box-shadow: inset 0 1px 1px #82cdff;
    /* inner shadow */
}

<div class="sqaure-blue-btn"></div>