Javascript+；Css，请求解决方案：鼠标悬停显示div，在鼠标关闭/单击关闭之前保持活动状态

好吧，所以：我想在我的页面上放一个信息框之类的东西。基本思路如下：

• 此人将鼠标滑过棕色弯曲的角形标签。选项卡将颜色更改为白色，变为方形，并显示有关该选项卡的信息框

• 只要鼠标停留在该选项卡或相关信息框上，该选项卡将保持白色和方形，相关信息框将保持打开状态

• 人员将鼠标从选项卡和相关框中移出。框关闭，选项卡返回棕色和曲线

到目前为止，我已经成功地使棕色标签在悬停时变为白色，并且出现了信息框。它保持白色，信息保持打开状态。然而，我无法理解两件事：

-如何使角标签在鼠标上方改变形状，然后在鼠标关闭后恢复 --只通过各种测试使其永久棕色/圆形或白色/方形，无切换

-如何使信息框和选项卡的颜色/形状在鼠标关闭后恢复为正常的棕色/弯曲/不可见。

我一直在使用w3school How tos和一些stackoverflow线程来达到这一目的，但我遇到了麻烦，我记不起足够的javascript来找出我的错误。我希望我能提供足够的信息来提供帮助

如果可能，我需要一个CSS/Javascript解决方案。我见过的大多数可能的解决方案都在jquery中，这让我更加困惑。然而，如果有一个更简单的方法来解决我所错过的所有问题，我会非常乐意去学习

作为参考，以下是我的代码：

我的页面的css：

/* Style the containment unit*/
.tabcontainer {
    clear: both;
    border-top: 1px solid #BB8571;
    margin-top: 10px;
    -webkit-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
    box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
    min-height:200px;

}

/* Style the tabs*/
.tabcontainer button {
    display:block;
    width:20%;
    float:left;
    text-align:center;
    padding: 1em;
    -webkit-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
    box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
    font-family: "Century Gothic", Verdana, Geneva, sans-serif;
    letter-spacing: 0.2em;
    border: none;
    outline: none;

}

.tabcontainer button:nth-child(even) {background:#d7b8ac;}
.tabcontainer button:nth-child(odd) {background:#f4dac3;}

/* Change background color of tabs on hover and maintain change while active */
.tabcontainer button:hover, .tabcontainer button.active {
    background-color:#fff;
}

/*specific corner tab styling*/
.tabcontainer button:nth-child(1) {
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-left-radius: 25px;
}

.tabcontainer button:nth-child(5) {
    -webkit-border-bottom-right-radius: 25px;
    -moz-border-radius-bottomright: 25px;
    border-bottom-right-radius: 25px;
    }

/* Style the infoboxes */
.tabcontent {
    display:none;
    background-color:tan;
    padding:2em 1em 1em;
    height:170px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-left-radius: 25px;
    -webkit-border-bottom-right-radius: 25px;
    -moz-border-radius-bottomright: 25px;
    border-bottom-right-radius: 25px;
    -webkit-box-shadow: inset 0px -5px 5px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0px -5px 5px 3px rgba(0,0,0,0.1);
    box-shadow: inset 0px -5px 5px 3px rgba(0,0,0,0.1);
}

<div class="tabcontainer"> <!––wraps around both tabs and info boxes-->

 <!––below: bar of button tabs--> 

<button class="tablinks" id="t1" onmouseover="infoBox(event, 'b1')">b1</button>
      <button class="tablinks" id="t2" onmouseover="infoBox(event, 'b2')">b2</button>
      <button class="tablinks" id="t3" onmouseover="infoBox(event, 'b3')">b3</button>
      <button class="tablinks" id="t4" onmouseover="infoBox(event, 'b4')">b4</button>
      <button class="tablinks" id="t5" onmouseover="infoBox(event, 'b5')">b5</button>

<!––below: five infoboxes with generic contents-->

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

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

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

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

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

</div>

我的页面的html：

/* Style the containment unit*/
.tabcontainer {
    clear: both;
    border-top: 1px solid #BB8571;
    margin-top: 10px;
    -webkit-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
    box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
    min-height:200px;

}

/* Style the tabs*/
.tabcontainer button {
    display:block;
    width:20%;
    float:left;
    text-align:center;
    padding: 1em;
    -webkit-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
    box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);
    font-family: "Century Gothic", Verdana, Geneva, sans-serif;
    letter-spacing: 0.2em;
    border: none;
    outline: none;

}

.tabcontainer button:nth-child(even) {background:#d7b8ac;}
.tabcontainer button:nth-child(odd) {background:#f4dac3;}

/* Change background color of tabs on hover and maintain change while active */
.tabcontainer button:hover, .tabcontainer button.active {
    background-color:#fff;
}

/*specific corner tab styling*/
.tabcontainer button:nth-child(1) {
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-left-radius: 25px;
}

.tabcontainer button:nth-child(5) {
    -webkit-border-bottom-right-radius: 25px;
    -moz-border-radius-bottomright: 25px;
    border-bottom-right-radius: 25px;
    }

/* Style the infoboxes */
.tabcontent {
    display:none;
    background-color:tan;
    padding:2em 1em 1em;
    height:170px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-left-radius: 25px;
    -webkit-border-bottom-right-radius: 25px;
    -moz-border-radius-bottomright: 25px;
    border-bottom-right-radius: 25px;
    -webkit-box-shadow: inset 0px -5px 5px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0px -5px 5px 3px rgba(0,0,0,0.1);
    box-shadow: inset 0px -5px 5px 3px rgba(0,0,0,0.1);
}

<div class="tabcontainer"> <!––wraps around both tabs and info boxes-->

 <!––below: bar of button tabs--> 

<button class="tablinks" id="t1" onmouseover="infoBox(event, 'b1')">b1</button>
      <button class="tablinks" id="t2" onmouseover="infoBox(event, 'b2')">b2</button>
      <button class="tablinks" id="t3" onmouseover="infoBox(event, 'b3')">b3</button>
      <button class="tablinks" id="t4" onmouseover="infoBox(event, 'b4')">b4</button>
      <button class="tablinks" id="t5" onmouseover="infoBox(event, 'b5')">b5</button>

<!––below: five infoboxes with generic contents-->

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

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

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

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

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

</div>

b1
b2
b3
b4
b5
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都。

洛杉矶
东京是日本的首都

纽约市
东京是日本的首都

东京
东京是日本的首都

我的页面的javascript，正如你所看到的，在我试图弄清楚它是如何工作的时候，它被大量地标记了

//start infoBox function to open infobox of a tab, concerning event and affected 'tab id'
function infoBox(event, tabID) {
//declare variables of i=data, tabcontent=blurb, tablinks=buttons
    var i, tabcontent, tablinks;
// find variable=tabcontent as anything with class 'tabcontent'
    tabcontent = document.getElementsByClassName("tabcontent");
// hide variables of tabcontents   
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
// find variable=tablinks as anything with class 'tablinks'    
    tablinks = document.getElementsByClassName("tablinks");
// remove active status of tablinks   
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
// show the current onmouseover tab
    document.getElementById(tabID).style.display = "block";
// related named target of event infobox, activate and show   
    event.currentTarget.className += " active";
}

//启动infoBox函数打开选项卡的infoBox，与事件和受影响的“选项卡id”有关
函数信息框（事件，选项卡ID）{
//声明i=data、tabcontent=blurb、tablinks=buttons的变量
var i，tabcontent，tablinks；
//find variable=tabcontent作为类为“tabcontent”的任何内容
tabcontent=document.getElementsByClassName（“tabcontent”）；
//隐藏tabcontents的变量
对于（i=0；i

tl；dr

您还需要删除

mouseout

上的信息选项卡。他们不会自动地“取消mouseover:-）并且在这样做的同时，也会删除

.active

类

工作代码：

函数信息框（事件，选项卡ID）{
//声明i=data、tabcontent=blurb、tablinks=buttons的变量
var i，tabcontent，tablinks；
//find variable=tabcontent作为类为“tabcontent”的任何内容
tabcontent=document.getElementsByClassName（“tabcontent”）；
//隐藏tabcontents的变量
对于（i=0；i

.tabcontainer{
明确：两者皆有；
边框顶部：1px实心#BB8571；
边缘顶部：10px；
-webkit盒阴影：嵌入0px 8px 5px-3px rgba（0,0,0.1）；
-moz盒阴影：嵌入0px 8px 5px-3px rgba（0,0,0.1）；
盒影：嵌入0px 8px 5px-3px rgba（0,0,0.1）；
最小高度：200px；
}
/*设置选项卡的样式*/
.选项卡容器按钮{
显示：块；
宽度：20%；
浮动：左；
文本对齐：居中；
填充：1em；
-webkit盒阴影：嵌入0px 8px 5px-3px rgba（0,0,0.1）；
-moz盒阴影：嵌入0px 8px 5px-3px rgba（0,0,0.1）；
盒影：嵌入0px 8px 5px-3px rgba（0,0,0.1）；
字体系列：“世纪哥特式”，Verdana，日内瓦，无衬线；
字母间距：0.2米；
边框：1px纯灰；
大纲：无；
边框左下半径：10px；
边框右下半径：10px；
过渡：全部5秒；
}
.tabcontainer按钮：第n个子（偶数）{background:#d7b8ac；}
.tabcontainer按钮：第n个子（奇数）{background:#f4dac3；}
/*更改悬停时选项卡的背景色，并在活动时保持更改*/
.tabcontainer按钮：悬停，.tabcontainer按钮.active{
背景色：#fff；
边框左下半径：0px；
博德