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>

鼠标向上时背景颜色不会改变铬

1 个答案: