Question

这是我的代码：

$.fn.right = function() {
   return $(document).width() - (this.offset().left + this.outerWidth());
}

$(document).ready(function(){
  $('a').bind('mouseenter', function() {
    var self = $(this);
    this.iid = setTimeout(function() {
      var tag_name = self.text(),
          top      = self.position().top + self.outerHeight(true),
          right = self.right();
      $('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
      
      $(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);  
      
    }, 525);
  }).bind('mouseleave', function(){
    if(this.iid){
      clearTimeout(this.iid)
      $('.tag_info').remove();
    }
  });
});

    body{
      padding: 20px;
      direction: rtl;
    }

    a {
        color: #3e6d8e !important;
        background-color: #E1ECF4;
        padding: 2px 5px;
    }
    .tag_info{
      position: absolute;
      width: 130px;
      height: 100px;
      display:none;
      background-color: black;
      color: white;
      padding: 10px;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a>long-length-tag</a>
    <a>tag</a>

它也有效，当你的鼠标离开标签时，弹出窗口将被移除。现在，当鼠标离开标签并继续弹出时，我想保留该弹出窗口。否则应将其删除。我怎么能这样做？

Answer 1

您可以添加一个条件来检查鼠标是否悬停在弹出窗口上，然后再移除它：

if ($('.tag_info:hover').length == 0) {....}

您需要在弹出窗口中添加一个事件，以便在mouseleave

上删除它

请参阅代码段：

＆＃13;

$.fn.right = function() {
  return $(document).width() - (this.offset().left + this.outerWidth());
}

$(document).ready(function() {
  $('a').bind('mouseenter', function() {
    var self = $(this);
    this.iid = setTimeout(function() {
      var tag_name = self.text(),
        top = self.position().top + self.outerHeight(true),
        right = self.right();
        
      var pop_up = $('<div />', {
        "class": 'tag_info',
        text: "Some explanations about " + tag_name,
        mouseleave: function(e){
             $(this).remove();
        }})  
      
      $('body').append(pop_up);

      $(".tag_info").css({
        top: top + "px",
        right: right + "px"
      }).fadeIn(200);

    }, 525);
  }).bind('mouseleave', function() {
    if (this.iid) {
      clearTimeout(this.iid)
      if ($('.tag_info:hover').length == 0) {
        $('.tag_info').remove();
      }
    }
  });


});

＆＃13;

body {
  padding: 20px;
  direction: rtl;
}

a {
  color: #3e6d8e !important;
  background-color: #E1ECF4;
  padding: 2px 5px;
}

.tag_info {
  position: absolute;
  width: 130px;
  height: 100px;
  display: none;
  background-color: black;
  color: white;
  padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>long-length-tag</a>
<a>tag</a>

＆＃13;

Answer 2

现在我想在鼠标离开标签时保持弹出窗口并继续弹出。

您可以使用MouseEvent.relatedTarget来检查鼠标留在哪个元素。

如果在mouseleave上添加事件侦听器，则当鼠标离开元素时，会将事件对象传递给事件回调。在该事件中，对象是属性relateTarget，它是指向鼠标所在元素的指针。因此，如果鼠标将元素留在tag_info元素上，则可以使信息不被隐藏。

如果您愿意，也可以将事件包装在jquery选择器中以创建jquery对象：

$(e.relateTarget) // do something with the jquery object

尝试将鼠标悬停在代码上，然后将鼠标指向tag_info

的顶部

希望这有帮助！

$.fn.right = function() {
  return $(document).width() - (this.offset().left + this.outerWidth());
}

$(document).ready(function() {
  $('a').bind('mouseenter', function() {
    var self = $(this);
    var iid = this.iid = setTimeout(function() {
      var tag_name = self.text(),
        top = self.position().top + self.outerHeight(true),
        right = self.right();
      $('body').append("<div class='tag_info'>Some explanations about " + tag_name + "</div>");

      var tagInfo = $(".tag_info");
      
      tagInfo.css({
        top: top + "px",
        right: right + "px"
      }).fadeIn(200);
      
      tagInfo.bind('mouseleave', function (e) {
        console.log('mouse left tag info');
        if (iid) {
          clearTimeout(iid)
          tagInfo.remove();
        }
      });

    }, 525);
  }).bind('mouseleave', function(e) {
    //this is the event callback and the event object is `e`
    if (e.relatedTarget && e.relatedTarget.classList.contains('tag_info')) {
      console.log('mouse left onto the tag_info');
    } else {
      console.log('mouse left onto something else');
      if (this.iid) {
        clearTimeout(this.iid)
        $('.tag_info').remove();
      }
    }
  });
});

body {
  padding: 20px;
  direction: rtl;
}

a {
  color: #3e6d8e !important;
  background-color: #E1ECF4;
  padding: 2px 5px;
}

.tag_info {
  position: absolute;
  width: 130px;
  height: 100px;
  display: none;
  background-color: black;
  color: white;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>long-length-tag</a>
<a>tag</a>

如何选择除特定元素之外的所有内容？

2 个答案: