Question

我正在尝试创建一个悬停效果，当用户将鼠标悬停在元素上时会显示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>

这样做有一个巧妙的技巧吗？

Answer 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");
    });

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

1 个答案: