JQuery在悬停时显示div，在两个div上保持答案

【问题标题】：JQuery show div on hover, keep while over both divsJQuery在悬停时显示div，在两个div上保持
【发布时间】：2014-01-12 21:49:51
【问题描述】：

我正在尝试创建一个悬停效果，当用户将鼠标悬停在一个元素上时会显示一个 div。悬停部分本身很简单，但我想在鼠标悬停在触发元素或新显示的 div 上时显示 div。

我尝试过 div 覆盖触发元素的位置，但是 mouseout 事件在显示的 div 上的 enter 事件之前触发。

我的例子

var count = 0;
$("#testCircle")
.on("mouseover", function () {
  count++;
  console.log("Count: " + count);
  console.log("Circle Mouse In");

  var position = $("#svgelem").offset(); // position = { left: 42, top: 567 }
  $("#dialog").css("left", position.left + 50 - 15)
  .css("top", position.top + 50 - 15)
  .show();
})
.on("mouseout", function () {
  count--;
  console.log("Count: " + count);
  if (count == 0) {
    $("#dialog").hide();
  }
  console.log("Circle Mouse Out");
});
$("#dialog").on("mouseover", function () {
  count++;
  console.log("Count: " + count);
  console.log("Dialog Mouse In");
}).on("mouseout", function () {
  count--;
  console.log("Count: " + count);
  if (count == 0) {
    $("#dialog").hide();
  }
  console.log("Dialog Mouse Out");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div>
  <svg id="svgelem" xmlns="http://www.w3.org/2000/svg" style="height: 850px;">
    <circle id="testCircle" cx="50" cy="50" r="15" />
  </svg>
</div>
<div id="dialog" style="position: absolute; display: none; padding-left: 35px">
  <div style="background: rgba(220, 220, 220, 0.6);"> <span>Branch - Changeset</span>
    <p>
      <select>
        <option>Test 1</option>
        <option>Test 2</option>
        <option>Test 3</option>
        <option>Test 4</option>
        <option>Test 5</option>
      </select>
      <br />
      <input type="text" />
      <br />
      <input type="submit" />
    </p>
  </div>
</div>

有没有一个巧妙的技巧可以做到这一点？

【问题讨论】：

试试$("#testCircle, #dialog").on("mouseover", function () { ...
你真的需要使用Jquery吗，因为看起来这可以用css来完成

标签： javascript jquery html

【解决方案1】：

希望对你有帮助

   var count = 0,
    timeoutObject;
    $("#testCircle")
    .on("mouseover", function () {
      count++;
      console.log("Count: " + count);
      console.log("Circle Mouse In");

      var position = $("#svgelem").offset(); // position = { left: 42, top: 567 }
      $("#dialog").css("left", position.left + 50 - 15)
      .css("top", position.top + 50 - 15)
      .show();
    })
    .on("mouseout", function () {
      count--;
      console.log("Count: " + count);
      if (count == 0) {
    timeoutObject= setTimeout(function(){
                        $("#dialog").hide();
                    },1000);
      }
      console.log("Circle Mouse Out");
    });
    $("#dialog").on("mouseover", function () {
    if(timeOutObject != undefined) {
    clearTimeout(timeoutObject);
    }
      count++;
      console.log("Count: " + count);
      console.log("Dialog Mouse In");
    }).on("mouseout", function () {
      count--;
      console.log("Count: " + count);
      if (count == 0) {
        $("#dialog").hide();
      }
      console.log("Dialog Mouse Out");
    });

【讨论】：