html - Css悬停按钮效果

Question

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

在这个 fiddle 中，我想要一些类似 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;
}

给看不懂的人!

如您所见， fiddle 上有 3 个按钮，名称为 like 让我们分别说按钮 A、B 和 C。

• 现在，当我将鼠标悬停在 A 上时，我得到一个带有插图的绿色背景盒子阴影 .
• 当我将鼠标悬停在 B 上时，我得到一个没有嵌入阴影的绿色背景

• 当我悬停在 C 上时，我什么也没有

• 当我点击 A 时，它保持不变

• 当我点击 B 时，会创建一个插入阴影
• 当我点击 C 时，会创建一个插入阴影

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

• 当我将鼠标悬停在 D 上时，我得到一个带有插图的绿色背景
  盒子阴影 .

• 当我点击 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;    
}

我希望这能回答你的问题