javascript触发器悬停在绝对元素和绝对元素下的元素上

Question

我想检测两者的悬停事件:绝对定位的元素和位于其下方的元素。

这里是简化的问题:

HTML:

<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="output"></div>    
<div id="output2"></div>
<svg width="40" height="40" id="svg">
    <circle r="20" cx="20" cy="20"></circle>
</svg>

CSS:

#content {
    background-color: green;    
}
#svg {
    position: absolute;
    left: 100px;
    top: 15px;
}

JS:

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

var output2 = $("#output2");
$("#svg").mouseenter(function(e){
    output2.text("in svg");
}).mouseleave(function(e) {
    output2.text("out svg"); 
});

和 jsfiddle:http://jsfiddle.net/r4xgq9s8/1/ .

编辑:

我想要得到以下结果:

• (在文本中，在 svg 中)当你完成这两个时，
• (out text，in svg)当你只超过#svg，而不是#content，
• (在文本中，在 svg 中)当你只在#content 而不是#svg 时，
• (out text, out svg)当你还没有结束的时候

Answer 1

那行不通，因为圆圈隐藏了它下面的内容。但是，您可以查看以下可能性:

• 制作内容的圆子。这样悬停事件就会冒泡。这样圆圈的所有内容都会输出“over text”和“over svg”，这并不是你真正想要的

• 写一点数学并检查你是否读完了课文

我将在这里为第二种方法尝试一种方法:

var output = $("#output");
var inCircle = false;

$("#content").mouseenter(function(e) {
  output.text("in text");
}).mouseout(function(e) {
  output.text("out text");
});

var output2 = $("#output2");
$("#svg").mouseenter(function(e) {
  output2.text("in svg");
  inCircle = true;
}).mouseleave(function(e) {
  output2.text("out svg");
  inCircle = false;
});

$(document).mousemove(function(e) {

  if (!inCircle) return; // When not in circle we return here

  var $content = $('#content');
  var offset = $content.offset();

  // Check if in content-element
  if (e.pageX > offset.left &&
    e.pageX < offset.left + $content.width() &&
    e.pageY > offset.top &&
    e.pageY < offset.top + $content.height()) {

    $content.trigger('mouseenter');
  } else {
    $content.trigger('mouseout');
  }


});

#content {
  background-color: green;
}
#svg {
  position: absolute;
  left: 100px;
  top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="output"></div>
<div id="output2"></div>
<svg width="40" height="40" id="svg">
  <circle r="20" cx="20" cy="20"></circle>
</svg>

这里的技巧是我们监听文档-mousemove。每当我们在圆圈中并且鼠标移到内容上时，我们都会触发内容上的鼠标输入。反之亦然，使用 mouseleave。