鼠标悬停在按钮打开选项卡中

Question

我有按钮和他们，每当我做onmouseover我想打开显示该按钮的信息的内容。有人可以指导我吗？

这就是我在鼠标点击时打开内容的方式：

function openTab() {
    var content     = $(this).parent().next(".content"),
        activeItems = wrapper.find(".active");

    if(!$(this).hasClass('active')) {
        $(this).add(content).add(activeItems).toggleClass('active');
        wrapper.css('min-height', content.outerHeight());
    }
};

tabToggle.on('click', openTab);

我尝试直接与onmouseover进行交互，但没有成功。

// ----------------- Variables

wrapper   = $(".tabs");
tabs      = wrapper.find(".nav-tab");
tabToggle = wrapper.find(".tab-toggle");

// ----------------- Functions

function openTab() {
	var content     = $(this).parent().next(".content"),
		activeItems = wrapper.find(".active");
	
	if(!$(this).hasClass('active')) {
		$(this).add(content).add(activeItems).toggleClass('active');
		wrapper.css('min-height', content.outerHeight());
	}
};

// ----------------- Interactions

tabToggle.on('click', openTab);

// ----------------- Constructor functions

$(window).load(function(){
  tabToggle.first().trigger('click');  
});

  .tabs .content { 
    width: 70%;
    opacity: 0;
   }

  .tabs .content.active {  
    opacity: 1; 
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">

<div class="tabs">
  <div class="nav-tab">
    <button class="tab-toggle">Tab 1</button>
  </div>
  <div class="content">
    <h3 class="heading">Tab 1 Content</h3>
    <p class="description">Lorem  ratione quasi deleniti neque rem, recusandae. Tenetur mollitia optio possimus fugiat cumque.</p>
  </div>
  <div class="nav-tab">
    <button class="tab-toggle">Tab 2</button>
  </div>
  <div class="content">
    <h3 class="heading">Tab 2 Content</h3>
    <p class="description">Lorem  cumque.</p>
  </div>
  
</div>
</div>
</div>

编辑1：如何在初始化页面时打开一个选项卡？

Answer 1

应该是：tabToggle.on('mouseover', openTab);

// ----------------- Variables

wrapper   = $(".tabs");
tabs      = wrapper.find(".nav-tab");
tabToggle = wrapper.find(".tab-toggle");

// ----------------- Functions

function openTab() {
	var content     = $(this).parent().next(".content"),
		activeItems = wrapper.find(".active");
	
	if(!$(this).hasClass('active')) {
		$(this).add(content).add(activeItems).toggleClass('active');
		wrapper.css('min-height', content.outerHeight());
	}
};

// ----------------- Interactions

tabToggle.on('mouseover', openTab);

// ----------------- Constructor functions

$(window).load(function(){
  tabToggle.first().trigger('click');  
});

.tabs .content { 
    width: 70%;
    opacity: 0;
   }

  .tabs .content.active {  
    opacity: 1; 
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">

<div class="tabs">
  <div class="nav-tab">
    <button class="tab-toggle">Tab 1</button>
  </div>
  <div class="content">
    <h3 class="heading">Tab 1 Content</h3>
    <p class="description">Lorem  ratione quasi deleniti neque rem, recusandae. Tenetur mollitia optio possimus fugiat cumque.</p>
  </div>
  <div class="nav-tab">
    <button class="tab-toggle">Tab 2</button>
  </div>
  <div class="content">
    <h3 class="heading">Tab 2 Content</h3>
    <p class="description">Lorem  cumque.</p>
  </div>
  
</div>
</div>
</div>