Tab鼠標滑動效果是網站中常見的組件之一。 在HTML中，我們可以通過CSS和JavaScript來實現此效果。 為了實現此效果，我們需要使用HTML中的div來創建選項卡。 在每個選項卡中，我們可以使用p標簽來添加標題和內容。 接下來，我們可以使用CSS樣式來添加選項卡和內容的樣式。 為了創建選項卡，我們可以使用display：inline-block和padding-right：12px等屬性。 為了使鼠標在選項卡上滑動時出現效果，我們可以使用JavaScript代碼。 我們可以通過使用mouseOver和mouseOut函數來定義鼠標移上和離開選項卡時的效果。 以下是實現HTML Tab鼠標滑動效果的代碼。

HTML：
選項卡1
選項卡2
這是選項卡1的內容
這是選項卡2的內容
CSS：
.tab {
display: block;
font-size: 18px;
margin-bottom: 30px;
}
.tab-header {
display: inline-block;
padding: 10px 12px;
margin-right: 12px;
cursor: pointer;
}
.tab-content {
display: none;
}
.active-tab {
display: block;
}
JavaScript：
function changeTab(tabNum) {
var i;
var tabContents = document.getElementsByClassName("tab-content");
var tabHeaders = document.getElementsByClassName("tab-header");
for (i = 0; i< tabContents.length; i++) {
tabContents[i].style.display = "none";
tabHeaders[i].classList.remove("active-tab");
}
document.getElementById("tab" + tabNum).style.display = "block";
tabHeaders[tabNum-1].classList.add("active-tab")
}