我试图制作一组按钮,我创建了标准按钮,当然我想要一个悬停效果,但我正在做的方式,渐变似乎没有改变到悬停状态。
.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 */
}
任何人都知道为什么?
答案 0 :(得分:6)
由于您在标准媒体资源中设置了background-image
,但只在background-color
状态设置了:hover
,因此它不会覆盖图片。
将background-color: #3b9ddd;
更改为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>
&#13;