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

Question

Here is my code:

 $.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> 

It works as well and that pop-up will be removed when your mouse leaves the tag. Now I want to keep that pop-up when the mouse leaves the tag and goes on that pop-up. Otherwise it should be removed. How can I do that?

Answer 1

You can add a condition to check if the mouse is hovering over the pop-up before removing it:

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

And you need to add an event on the pop-up itself to remove it on mouseleave

See code snippet:

 $.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(); } } }); }); 

 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 2

Now I want to keep that pop-up when the mouse leaves the tag and goes on that pop-up.

You could use MouseEvent.relatedTarget to check which element the mouse left to.

If you add an event listener on mouseleave , an event object the is passed into the event callback when the mouse leaves the element. In that event object is the property relateTarget which is a pointer to the element the mouse left on to. So if the mouse leaves the element on to the tag_info element, you can make the info not be hidden.

You can also wrap the event in a jquery selector to create a jquery object if you prefer like so:

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

Try hovering over the tag and then pointing your mouse on top of the tag_info

Hopefully that helps!

 $.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>