我如何选择除特定元素以外的所有内容? [英] How can I select everything except specific element?
本文介绍了我如何选择除特定元素以外的所有内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的代码:
$.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?
推荐答案
您可以添加条件来检查鼠标是否悬停在弹出窗口上,然后再将其删除:
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) {....}
您需要在弹出式窗口本身上添加一个事件,以在mouseleave
And you need to add an event on the pop-up itself to remove it on mouseleave
查看代码段:
$.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>
这篇关于我如何选择除特定元素以外的所有内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文