Question

我在导航选项卡中添加了mousehover和mouseleave功能，当我将鼠标悬停在图标上时，它会显示内容，而当鼠标离开时，它不会隐藏内容。

即使我试图在屏幕上单击的地方都隐藏标签内容，它也起作用。如果我再次将鼠标悬停在图标上，则标签内容不会显示。

有人可以帮我修复它吗？

->如果我将鼠标悬停/单击，则应显示图标内容。

->如果将鼠标悬停/单击在屏幕上的任意位置，则应隐藏选项卡内容，再次，当我将鼠标悬停/单击图标时，它应显示选项卡内容。

请帮助我修复这些家伙。

$('.nav-tabs > li > a').mouseover(function() {
  $(this).tab('show');
});
	$('.nav-tabs > li > a').mouseleave(function() {
  $(this).tab('hide');
});


/*	 $(document).click(function(){  
  $('#home').hide(); //hide the button

  });
  */

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li><a data-toggle="tab" href="#home"><i ng-click="clickevent()" class="fa fa-user-circle fa-4x" aria-hidden="true"></i></a></li>
    <li><a data-toggle="tab" href="#menu1"><i class="fa fa-user-circle fa-4x" aria-hidden="true"></i></a></li>
    <li><a data-toggle="tab" href="#menu2"><i class="fa fa-user-circle fa-4x" aria-hidden="true"></i></a></li>
    <li><a data-toggle="tab" href="#menu3"><i class="fa fa-user-circle fa-4x" aria-hidden="true"></i></a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade">      
  				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>			
    </div>
    <div id="menu1" class="tab-pane fade">      
      	<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>     
    </div>
    <div id="menu2" class="tab-pane fade">      
      		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>          
    </div>
    <div id="menu3" class="tab-pane fade">     
      	<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>        
    </div>
  </div>


</body>
</html>

Answer 1

引导程序选项卡中没有“隐藏”，但是您可以通过以下代码克服它（只需重置引导程序的更改）：

$('.nav-tabs > li > a').mouseleave(function () {
   $(this).parent().removeClass('active');
   var id = this.href.split('#')[1];
   $("#" + id).removeClass("active");
});

鼠标离开方法无法隐藏内容

1 个答案: