如何在儿童悬停时停用父母的头衔？

Question

这是我的代码：

＆＃13;

＆＃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();
      $('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();
    }
  });
});

＆＃13;

    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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如您所见，标签上有一个黑色弹出窗口悬停。当弹出窗口显示时，div的标题也会出现。如何禁用标题？ （在标签上悬停）

Answer 1

标题悬停是每个浏览器的事情。

更好的选择是在添加悬停选项时删除/// somewhere in your hover in function element.oldTitle = element.title; element.title = ''; 属性。

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

{{1}}

Answer 2

在mouseenter事件中添加以下代码：

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

..并且这在mouseleave上：

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

Answer 3

这应该可以解决问题。当鼠标进入标记时，将在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>