Hover-enabled bootstrap tabview

Navigation
2

I created a tab with bootstrap and it changes the tabs when clicking the links would like to change from a tab to another passing the mouse over it is possible? follow the code: 

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
	<a class="nav-link active" href="#profile" role="tab" data-toggle="tab">profile</a>
  </li>
  <li class="nav-item">
	<a class="nav-link" href="#buzz" role="tab" data-toggle="tab">buzz</a>
  </li>
  <li class="nav-item">
	<a class="nav-link" href="#references" role="tab" data-toggle="tab">references</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
  <div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
</div>
    
asked by anonymous 14.05.2018 / 19:42

1 answer

2

It achieves with event mouseover and method .trigger("click") : 

$(".nav-item").on("mouseover", function(){
   $("a", this).trigger("click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
	<a class="nav-link active" href="#profile" role="tab" data-toggle="tab">profile</a>
  </li>
  <li class="nav-item">
	<a class="nav-link" href="#buzz" role="tab" data-toggle="tab">buzz</a>
  </li>
  <li class="nav-item">
	<a class="nav-link" href="#references" role="tab" data-toggle="tab">references</a>
  </li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
  <div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
</div>
    
14.05.2018 / 20:06
Validate fields with jQuery Error changing height of an element