如何禁用父母的孩子悬停标题？

这里是我的代码：如何禁用父母的孩子悬停标题？

$.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; 
 
    } 
 
    
 
    div { 
 
     padding: 20px; 
 
     border: 1px solid gray; 
 
    } 
 
    
 
    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> 
 
    <div title='a title'> 
 
     <a>long-length-tag</a> 
 
     <a>tag</a> 
 
    </div>

正如你看到的，有黑暗弹出标签上徘徊。当该弹出窗口显示时，div的标题也会出现。我如何禁用标题？ （标签悬停）

来源

2017-07-17 stack

要立即取下title属性。 – smerny

@smerny那么我需要''div'的其他区域。 – stack

如果需要，您可以使用js删除/重新添加它（同时显示弹出窗口） – smerny

标题悬停是每个浏览器的东西。

更好的选择是在添加悬停选项时删除title属性。

/// somewhere in your hover in function 
element.oldTitle = element.title; 
element.title = '';

/// somewhere in your hover out function 
element.title = element.oldTitle;

来源

2017-07-17 18:03:55 Neal

添加以下代码上MouseEnter事件：

$(this).parent().data('title', $(this).parent().attr('title')); 
$(this).parent().attr('title', '');

..这对鼠标离开：

$(this).parent().attr('title', $(this).parent().data('title'));

$.fn.right = function() { 
 
    return $(document).width() - (this.offset().left + this.outerWidth()); 
 
} 
 

 
$(document).ready(function(){ 
 
    $('a').bind('mouseenter', function() { 
 
    var self = $(this); 
 

 
    $(this).parent().data('title', $(this).parent().attr('title')); 
 
    $(this).parent().attr('title', ''); 
 

 
    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(){ 
 
     
 
    $(this).parent().attr('title', $(this).parent().data('title')); 
 

 
    if(this.iid){ 
 
     clearTimeout(this.iid) 
 
     $('.tag_info').remove(); 
 
    } 
 
    }); 
 
});

body{ 
 
     padding: 20px; 
 
     direction: rtl; 
 
    } 
 
    
 
    div { 
 
     padding: 20px; 
 
     border: 1px solid gray; 
 
    } 
 
    
 
    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> 
 
    <div title='a title'> 
 
     <a>long-length-tag</a> 
 
     <a>tag</a> 
 
    </div>

来源

2017-07-17 18:56:12

只能在标记悬停时禁用标题，正如问题 – Proto

中所述。确实如此。我修好了，谢谢。 –

这应该可以做到。当您的鼠标输入标签时，当前标题将在oldTitle属性中设置。当鼠标离开标签时，当前标题将从oldTitle属性中取出旧值。

$.fn.right = function() { 
 
    return $(document).width() - (this.offset().left + this.outerWidth()); 
 
} 
 

 
$(document).ready(function(){ 
 
    $('a').bind('mouseenter', function() { 
 
    var self = $(this); 
 
    
 
    //get title and set it in a new attribute of the div 
 
    var container = $(this).closest('div'); 
 
    container.attr('oldTitle', container.attr('title')); 
 
    container.attr('title', ''); 
 
    
 
    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(); 
 
     
 
     //reactivate the title 
 
     var container = $(this).closest('div'); 
 
     container.attr('title', container.attr('oldTitle')); 
 
    } 
 
    }); 
 
}); 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

body{ 
 
     padding: 20px; 
 
     direction: rtl; 
 
    } 
 
    
 
    div { 
 
     padding: 20px; 
 
     border: 1px solid gray; 
 
    } 
 
    
 
    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> 
 
    <div title='a title'> 
 
     <a>long-length-tag</a> 
 
     <a>tag</a> 
 
    </div>

来源

2017-07-17 18:58:42 Proto

如何禁用父母的孩子悬停标题？

回答

相关问题