Javascript+Css，请求解决方案 : mouseover hover displays div, 保持活跃直到mouseoff/click关闭

Question

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

• 人将鼠标悬停在棕色弯 Angular 标签上。选项卡的颜色变为白色，变成正方形，并显示有关该选项卡的信息框。

• 只要鼠标悬停在该选项卡或相关信息框上，选项卡就会保持白色和方形，并且相关信息框保持打开状态。

• 用户将鼠标移出选项卡和相关框。框关闭，标签恢复为棕色和 flex 。

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

- 如何使 Angular 标签在鼠标悬停时改变形状，然后在鼠标移开后恢复-- 仅通过各种测试使其成为永久棕色/圆形或白色/方形，没有切换。

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

我一直在使用 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);
}

我的页面的 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 类；

工作代码:

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>