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

时间：2018-09-07 00:56:29

标签： javascript html css tabs mousehover

好的，所以：我正在尝试在页面上放置类似信息框的内容。基本思路如下：

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

  • 只要鼠标停留在该选项卡或相关信息框上，该选项卡仍为白色和正方形，并且相关信息框仍处于打开状态。

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

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

-如何使边角选项卡在鼠标悬停时更改其形状，并在鼠标移开后恢复原状 -仅通过各种测试进行了管理，使其永久变成棕色/圆形或白色/正方形，没有切换。

-如何将信息框和标签的颜色/形状恢复为正常的棕色/弯曲/不可见状态。

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

1 个答案:

答案 0 :(得分：2)

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>

相关问题
最新问题