Question

我有一个#myObject元素。

我尝试将#myObject的背景更改为#000，当鼠标悬停在其上并在将鼠标悬停时将其背景更改回#ffff00

但是，当用户点击它时，我想将#myObject的背景更改为#FFF。

我在onMouseOver，onMouseOut和onClick上使用了3个函数。

但是在用户点击之后，＆＃34; onMouseOut＆＃34;功能被触发。

用户在点击后onClick悬停后，如何让#myObject后台切换功能正常工作？

<div id="myObject" onMouseOver='objHover(this.id);' onMouseOut='objMouseOut(this.id);' onclick='objClick(this.id);'></div>

function objClick(id) {
    document.getElementById('captchaResposta').value = id;
    $('#'+ id).css('background','#FFF');
}

function objHover(id) {
    document.getElementById('captchaResposta').value = id;
    $('#'+ id).css('background','#000');
}

function objMouseOut(id) {
    document.getElementById('captchaResposta').value = id;
    $('.imagemCaptcha').css('background','#ffff00');
}

Answer 1

以下内容应该有所帮助，它使用变量objSelected来跟踪鼠标单击和mouseOut函数中的检查。您仍然需要弄清楚何时将对象的颜色还原为它的原始颜色

<div id="myObject" onMouseOver='objHover(this.id);' onMouseOut='objMouseOut(this.id);' onclick='objClick(this.id);'></div>

var objSelected = false;

function objClick(id) {
    document.getElementById('captchaResposta').value = id;
    $('#'+ id).css('background','#FFF');
    objSelected = true;
}

function objHover(id) {
    document.getElementById('captchaResposta').value = id;
    $('#'+ id).css('background','#000');
}

function objMouseOut(id) {
    document.getElementById('captchaResposta').value = id;
    if (objSelected == false)
    {
        $('.imagemCaptcha').css('background','#ffff00');
    }
}

Answer 2

为什么不使用CSS hover伪类来更改背景，并仅将JavaScript用于点击事件？这样，当鼠标离开元素时，它仍然保持单击时的颜色

function objClick(id) {
  $("#myObject").css('background', '#FFF');
}

#myObject {
  width: 100px;
  height: 100px;
  background: #ffff00;
}
#myObject:hover {
  background: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myObject" onclick='objClick(this.id);'></div>

Answer 3

“onMouseOver，onMouseOut和onClick。”

我认为您可以使用应用于元素的类（而不是更改颜色）。单击时，您可以添加imageView.kf_setImageWithURL(NSURL(string: "http://your_image_url.png")!)类（或您要使用的任何名称）。然后，在mouseout事件上，您可以检查选择器是否具有clicked类：如果没有，那么您可以添加clicked类（及其相应的背景颜色）。它可以很好地完成这项工作。

如何在onClick函数后忽略onMouseOut？

3 个答案: