Question

看看这个小提琴JS FIDDLE 当我悬停（:hover）background更改但点击时（:active）box-shadow没有更改，不知道为什么？如果在悬停时另一个按钮没有更改background，则不会发生这种情况！

在这个小提琴里，我想要像button 1和button 2的组合

.white-button {
    background: #FFF;
    font-weight: normal;
    color: #3b3b3b;
    border: 1px solid #DDD;
    box-shadow: 0 0 2px #ccc;
    font-family: MV boli,Tahoma;
    margin: 5px;
    padding: 5px 10px 5px 10px;
    font-size: 15px;
}
.positive:enabled:hover {
    background: #99CD30;
    box-shadow: inset 2px -7px 11px rgba(80, 92, 51, 0.17)!important;
}
button:active {
    border-bottom-color: #999;
    box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
}
.gray-button{
    background:#eee;
    padding:5px 10px;  
    border: 1px solid #999;
    border-bottom-color: #888;
}

对于那些无法忍受的人！

正如您所看到的，名称为like的小提琴上有3个按钮，然后分别按下按钮A,B and C。

现在，当我悬停A时，我会看到一个带有插页的 绿色背景 box-shadow 。
当我悬停B时，我得到 绿色背景，没有插入阴影
当我悬停C时，我没有
当我点击A时， 保持不变
当我点击B时， 插入阴影 已创建
当我点击C时，会创建 插入阴影

现在我想要的按钮是D我想要

当我悬停D时，我得到了一个带有插页的 绿色背景 box-shadow 。
当我点击D时，会创建另一个 插入阴影 ，替换上一个。

但这不会发生，不知道为什么？

Answer 1

我希望这就是你想要的......

http://jsfiddle.net/rahulrulez/M2f9F/3/

我刚玩了!important

的属性

.white-button {
background: #FFF;
font-weight: normal;
color: #3b3b3b;
border: 1px solid #DDD;
box-shadow: 0 0 2px #ccc;
font-family: MV boli,Tahoma;
margin: 5px;
padding: 5px 10px 5px 10px;
font-size: 15px;
}

.positive4:hover {
background: #99CD30;
box-shadow: inset 2px -7px 11px rgba(80, 92, 51, 0.17);
}

.positive4:active {
border-bottom-color: #999;
box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2) !important;    
}

我希望这能回答你的问题

Css悬停按钮效果

1 个答案: