Subsection List

Created 16 Apr 2020 05:51, Updated 16 Apr 2020 05:51

The Subsections list on every note page to the right uses a very special coding in order to bring out the boxes upon hovering over the box. The code also causes the text not to run off the screen or out of the box. Overall, only one CSS class is needed to accomplish the goal, .subsection, but there is a lot of coding for the class.

The code is as follows:

.subsection{
    display:inline-block;
    height: 1.4em;
    background-color:#FFE;
    border: 1px solid #660;
    margin-right:-1px; margin-bottom:1px;
    border-right:none;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    padding: 0px 3px 0px 3px;
    width: 130px;
    overflow:hidden;
}
.subsection span{    display: none; }
.subsection:hover{
    background-color:#FFF;
}
.subsection:hover span{
    position: absolute;
    display: inline;
    text-align:left;
    font-size:80%;
    margin: 15px -4px;
    height: auto;
    width: 250px;
    background: #FFF;
    border: 1px solid #660;
    color: #000;
    padding: 3px;
}
.subsection:hover span span {
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}

Of these, you really should not change .subsection span and .subsection:hover span span. The others you can change looks for.

.subsection by itself dictates the looks of the actual tabs. The .subsection:hover span controls the looks of the box that appears upon hovering over the tab.

Fix IE bug

除非特別註明,本頁內容採用以下授權方式: Creative Commons Attribution-ShareAlike 3.0 License