鼠标向上时Chrome中的背景颜色不会改变答案

【问题标题】：Background color not changing in Chrome when mouse up鼠标向上时Chrome中的背景颜色不会改变
【发布时间】：2017-07-03 10:35:38
【问题描述】：

我在 4 个页面中有 4 个按钮，一个按钮是多选按钮（如选择框）。当我将鼠标悬停在按钮上时，按钮的颜色会发生变化，而当鼠标移出时，按钮的颜色将变为正常。但是，如果我单击多选按钮，颜色会发生变化（这很好），它会显示下拉菜单等数据，但是，如果我将mousehover 指向其他按钮，则多选按钮的颜色不会变为正常，只会发生这种情况在 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 ;
    }

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

【问题讨论】：

一定是少了什么。您的代码没有产生任何可见的东西......而且，标题说明了背景，但 css 只影响边框
ButtonUtilities 与 BtnUtilities 不同
<a> 内也没有带有 btn-border 类的 div ...所以除了预测您的意图之外，不确定 IE 在做什么
抱歉，我错过了更新 btnutilities。我为此提供了一些额外的 css，但我只提供了上述内容。我的问题是它可以在 IE 中工作，但不能在 chrome 中工作，甚至是简单的边框颜色变化。

标签： javascript css dom-events

【解决方案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>

【讨论】：