如何 - 悬停选项卡

了解如何使用 CSS 和 JavaScript 在悬停时更改选项卡。

悬停选项卡

将鼠标悬停在菜单按钮之一上以显示选项卡内容

伦敦

伦敦是英国的首都。

巴黎

巴黎是法国的首都。

东京

东京是日本的首都。

亲自尝试 »

创建可悬停的垂直选项卡

步骤 1) 添加 HTML

示例

<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'London')">伦敦</button>
<button class="tablinks" onmouseover="openCity(event, 'Paris')">巴黎</button>
<button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>

创建按钮来打开特定的选项卡内容。所有带有`class="tabcontent"`的`

`元素默认情况下是隐藏的（通过 CSS 和 JS）。当用户将鼠标悬停在按钮上时，它将打开与该按钮“匹配”的选项卡内容。

步骤 2) 添加 CSS

为按钮和选项卡内容设置样式

示例

/* 选项卡样式 */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}

/* 为用于打开选项卡内容的按钮设置样式 */
.tab button {
display: block;
background-color: inherit;
color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
outline: none;
text-align: left;
cursor: pointer;
}

/* 改变按钮悬停时的背景颜色 */
.tab button:hover {
  background-color: #ddd;
}

/* 创建一个活动的/当前的“选项卡按钮”类 */
.tab button.active {
background-color: #ccc;
}

/* 选项卡内容样式 */
.tabcontent {
  float: left;
  padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}