我的鼠标悬停，mouseleave不工作

本文介绍了我的鼠标悬停，mouseleave不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

（$（$）$（$）$（$）$（$$$$$工作
$（'＃eventTarget'）。bind（mouseleave，changeColor）; //这不工作

$（'＃eventTarget'）bind（click，function （）{//此代码的作用是
$（'＃eventTarget'）。unbind（mouseover，changeColor）;
$（'＃eventTarget'）。unbind（mouseleave，changeColor）;
$（'＃eventTarget'）。html（< p>点击事件处理程序已取消< / p>）;
}）;
}）;
函数changeColor（evt）{
$（'＃eventTarget'）。toggleClass（highlight）;
}

CSS：

<

$ b背景颜色：黄色

}

HTML正文：

 < div id =eventTargetclass =normal> 
 HardCoreProg ... 
 
 *所有活动
 *订阅
 *建议
< / div>

解决方案

更改您的突出显示CSS类，如下所示：

  .highlight 
 {
 background-color：Red！important; 
}

作为奖金，使用 hover 函数用一行代码绑定到mouseover和mouseleave事件：

  $（'＃eventTarget'） .hover（changeColor，changeColor）;

$("document").ready(function () {
       $('#eventTarget').bind("mouseover", changeColor);//This doesnt work
       $('#eventTarget').bind("mouseleave", changeColor);//This doesnt work

       $('#eventTarget').bind("click", function(){   //This code works
              $('#eventTarget').unbind("mouseover", changeColor);
              $('#eventTarget').unbind("mouseleave", changeColor);
              $('#eventTarget').html("<p> click event handler Canceled</p>");
       });
    });
  function changeColor(evt) {
      $('#eventTarget').toggleClass("highlight");
    }

CSS:

.highlight
{
    background-color:Red
}
.normal
{
    background-color:Yellow

}

HTML body:

    <div id="eventTarget" class="normal">
    HardCoreProg...

* All activity
* Subscriptions
* Recommendations
</div>

解决方案

Change your highlight CSS class as follows:

.highlight
{
    background-color:Red !important;
}

As a bonus, use the hover function to bind to both mouseover and mouseleave events with one line of code:

$('#eventTarget').hover(changeColor, changeColor);

这篇关于我的鼠标悬停，mouseleave不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！