Html Css悬停按钮效果

看这把小提琴 当我悬停（

：悬停

）

背景

改变，但当单击（

：活动

）

框阴影

没有改变不知道为什么？如果悬停时另一个按钮未更改背景，则不会发生此情况

在这把小提琴中，我想要像按钮1和按钮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;
}

为那些无法理解的人

正如您所看到的，小提琴上有3个按钮，分别是A、B和C

• 现在，当我将鼠标悬停在

  A

  上时，我会看到一个带有插图的绿色背景 框阴影
• 当我悬停在

  B

  上时，我得到了一个绿色背景，没有插入阴影
• 当我悬停在

  C

  上时，我得到什么都没有

• 当我单击

  A

  时，它保持不变

• 当我单击

  B

  时，将创建一个插入阴影
• 当我单击

  C

  时，将创建一个插入阴影

现在我想要的按钮是

D

我想要

• 当我将鼠标悬停在

  D

  上时，我会得到一个带插图的绿色背景
  框阴影
• 当我单击

  D

  时，将创建另一个插入阴影来替换上一个阴影
  但这并没有发生，我不知道为什么？

---

我希望这就是你想要的
我刚刚玩了

属性！重要信息

.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;    
}

---

我希望这能回答你的问题
我不确定我是否理解这个问题-你能澄清一下你的预期结果吗？你能解释一下你做了什么吗？当然，你说了！对于悬停属性的框阴影很重要，它覆盖了活动元素的框阴影。我刚刚将其删除并添加到：active of same.：-）我希望你明白我的意思。！重要信息非常重要：-）它将覆盖所有其他类似属性

！重要

表示此css属性不重要或非常重要？因为悬停是一个

不重要的

，而活动是

重要的

@rahulPatilbut如果是，为什么它被称为

！重要信息

？