Question

我正在使用Tristen Brown的hoverintent library，这是jQuery hoverIntent库的纯Javascript版本。

我有两个元素first和second。

second元素具有hoverintent个处理程序，这会导致工具提示出现在该元素上方。当我手动将鼠标悬停在second上时，工具提示会按预期显示。

我想以编程方式触发second的工具提示。例如，要与first元素进行交互，会导致出现second元素的工具提示。我试图使用jQuery trigger来做到这一点。我能够trigger鼠标悬停处理程序，但不能使用任何hoverIntent。

有什么建议吗？

这是我的Javascript：

$( document ).ready(function() {
  var first = document.getElementById('first');
  var second = document.getElementById('second');

  $(first).mouseover(function(){
    $(second).trigger({ type:"mouseover", clientX:"350", clientY:"105" });
    $(second).trigger({ type:"mousemove", clientX:"350", clientY:"105" });
  });

  hoverintent(second, function(e) {
    this.className = 'on';
  }, function(e) {
    this.className = 'off';
  });

  $(second).mouseover(function(){
    console.log("mouseover");
  });
});

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src='http://tristen.ca/hoverintent/dist/hoverintent.min.js'></script>

  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div style="padding:100px;">
    <ul class='examples'>
      <li id='first'>
        Trigger
      </li>
      <li id='second'>
        hoverintent
        <span class='popup'>Hi there</span>
      </li>
    </ul>
  </div>
</body>

</html>

完整的JS bin在这里：

http://jsbin.com/kumeva/4/edit?js,output

Answer 1

我想通过将鼠标悬停在第一个元素上来触发第二个工具提示。

您可以将一系列鼠标事件发送到#second，并将 hoverintent 代码和调度代码完全分开，如下所示：

// Hoverintent code
$(document).ready(function() {
  var second = document.getElementById('second');
  hoverintent(second, function(e) {
    this.className = 'on';
  }, function(e) {
    this.className = 'off';
  });
});

///////////////////////////////////

// Dispatch code
$(document).ready(function() {
  var first = document.getElementById('first');
  var second = document.getElementById('second');
  $(first).on("mouseover", function(){
    // Send a mouseover to wake hoverintent
    var event = new MouseEvent("mouseover");
    second.dispatchEvent(event);

    // Send a mousemove trigger the internal hover code
    event = new MouseEvent("mousemove");
    second.dispatchEvent(event);
  });

  $(first).on("mouseout", function(){
    // Cancel the hover code
    var event = new MouseEvent("mouseout");
    second.dispatchEvent(event);
  });
});

Demo

Answer 2

根据librairy的源代码，它依赖于鼠标悬停和 mouseout 。要确定鼠标位置，请使用 clientX 和 clientY ，而不是 pageX / Y 。

源文件：https://github.com/tristen/hoverintent/blob/gh-pages/index.js

我如何以编程方式触发＆＃34; hoverintent＆＃34;在元素

2 个答案:

Demo