如何禁用父母的孩子懸停標題？

這裏是我的代碼：如何禁用父母的孩子懸停標題？

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

如何禁用父母的孩子懸停標題？

回答

相關問題