3

我有一个包含多个具有绝对位置的 div 的 div，我想为父 div 处理鼠标输入事件我使用这个小提琴： 小提琴 它不能正常工作是他们处理这个问题的任何其他方式吗？

HTML 标记

<div id="content">
SYDNEY (Reuters) - An Australian man had his driving licence suspended for 10 months and was fined after he was
 <div class="abs"></div>
caught driving a scooter made of a motorised beer cooler capable of carrying several dozen drinks -- after knocking back a few.
</div>
<div id="output">   
</div>

脚本

$(function() {
var output = $("#output");
$("#content")
  .mouseenter(function(e){
    output.text("I'm in!");
}).mouseout(function(e) {
    output.text("I'm out!"); 
});
});​


#content {
background-color:#cccc99;   
position:relative;     
}
.abs{
 position:absolute;
 top:0px;
 left:70px;
 background-color:red; 
 width:30px;
 height:30px;   
 }​
4

2 回答 2

8

你自己已经成功了一半。由于mouseover和事件冒泡，它们将在您和您的事件处理程序正在监视的元素的子元素中mouseout多次触发。jQuery 提供了受 IE 启发的事件和事件，它只触发被监视元素本身的鼠标事件，而不触发元素子元素上的事件。使用and事件，您的代码将按预期工作。看到这个更新的小提琴。或者，使用 jQuery语法，它在内部使用和事件，并以方便的语法包装。mouseovermouseoutmouseentermouseleavemouseovermouseleavehovermouseentermouseleave

于 2012-09-06T10:41:28.893 回答
2

据我了解 - 红色 div 的问题。这是正确的。使用jQuery 悬停代替 mouseenter/mouseout

$(function() {
    var output = $("#output");
    $("#content")
      .hover(function(e){
        output.text("I'm in!");
    },function(e) {
        output.text("I'm out!"); 
    });
});​
于 2012-09-06T10:41:14.820 回答