鼠标向上时背景颜色在chrome中不会更改

Question

我在4个页面中有4个按钮，一个按钮是多选按钮（如选择框）。 当我将鼠标悬停在按钮上时，按钮的颜色将更改，而当鼠标移出时，按钮的颜色将变为正常。 但是，如果我单击多选按钮，则颜色会发生变化（很好），并且会显示类似下拉列表的数据，但是，如果我将鼠标悬停在其他按钮上，则多选按钮的颜色不会恢复正常，仅发生在chrome中在IE11中工作正常。

下面是我的代码：

<div id="ButtonDiv" class="btn"><a class="btn-a-normal" id="MORE_ACT"  onmousedown="BtnUtilities.buttonDown(this)" onmouseup="BtnUtilities.buttonUp(this)" onmouseleave="BtnUtilities.buttonUp(this)" onmouseout="BtnUtilities.buttonUp(this)" onselectstart="return false"  href="javascript:void(0)" data-href="javascript:void(0)">

var BtnUtilities = {
    buttonDown: function(element) {
        element.className = "btn-a-pressed";
    },

    buttonUp: function(element) {
        element.className = "btn-a-normal";
    }
};  



.btn > a.btn-a-normal > div.btn-border, .buttonOn > a.btn-a-normal > div.btn-border {
  border-style: solid ;
  border-width: 1px ;
  border-color: #c7c7c7 #c7c7c7 #c7c7c7 #c7c7c7 ;
}

.btn > a.btn-a-pressed > div.btn-border, .buttonOn > a.btn-a-pressed > div.btn-border {
  border-style: solid ;
  border-width: 1px ;
  border-color: #4b4b4b #4b4b4b #4b4b4b #4b4b4b ;
}

你能告诉我我哪里错了吗？

Answer 1

检查这个简单的代码，这对您有帮助

<div id="ButtonDiv" class="btn"><a class="btn-a-normal" id="MORE_ACT"  onmouseover="buttonDown(this)" onmouseout="buttonUp(this)">test</a>
</div>

<script>

    function buttonDown(element) {
        element.className = "btn-a-pressed";
    }

    function buttonUp(element) {
        element.className = "btn-a-normal";
    }

</script>

<style>
    .btn > a.btn-a-normal {
        color: red;
    }

    .btn > a.btn-a-pressed {
        color: green;
    }
</style>