Javascript+Css，请求解决方案：鼠标悬停显示 div，保持活动状态直到 mouseoff/click 关闭

Question

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

人将鼠标悬停在棕色弯角标签上。选项卡颜色变为白色，变成正方形，并出现有关该选项卡的信息框。
只要鼠标悬停在该选项卡或相关信息框上，选项卡就会保持白色和方形，并且相关信息框保持打开状态。
人将鼠标移出选项卡和相关框。盒子关闭，标签 returns 变成棕色和曲线。

到目前为止，我已经设法让棕色标签在鼠标悬停时变成白色，并出现信息框。它保持白色，信息保持打开状态。但是，我无法弄清楚两件事：

- 如何使角标签在鼠标悬停时改变形状，然后在鼠标移开后恢复 -- 仅通过各种测试使其永久 brown/round 或 white/square，无需切换。

- 如何使信息框和选项卡 color/shape 在鼠标关闭后恢复正常 brown/curvy/invisible。

我一直在使用 w3school How-tos 和一些 Whosebug 线程来达到这个目的，但我遇到了困难，我不记得足够 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);
}

我页面的html：

<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>

和我页面的 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";
}

Answer 1

tl;dr

您还需要删除 mouseout 上的信息选项卡。他们自己不会自动 "un-onmouseover" :-) 并且同时删除 .active class;

工作代码：

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";
}

function closeInfoBox() {
 var tabcontent = document.getElementsByClassName("tabcontent");
    // hide tabcontents   
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    // remove also active class
    var tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
}

.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: 1px solid grey;
    outline: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all .5s;

}

.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;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

/*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);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <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>

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

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

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

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

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

</div>
</body>
</html>

Javascript+Css，请求解决方案：鼠标悬停显示 div，保持活动状态直到 mouseoff/click 关闭

Javascript+Css, request solution: mouseover hover displays div, stays active until mouseoff/click closes

html

javascript

css

tabs

mousehover