css - 纯 CSS Accordion : Detects "hover" from far below slide

Question

所以我终于设法让这个 CSS Accordion 大部分按照我想要的方式工作。然而，仍然有一个奇怪的琐碎问题，我似乎无法确定。

这是 Accordion 的 JS fiddle :http://jsfiddle.net/RahpC/

现在，如果您从底部接近幻灯片，您可以看到它们在大约 200 像素外受到影响(至少在我的屏幕上是这样)。

同样的问题导致 Accordion 在放入页面时在其下方有很多“空白区域”。最初有 5 张幻灯片，这似乎让我觉得沿线的某个地方它仍然假设仍然有 5 张幻灯片。

在我来这里提问之前，我已经尝试过尽可能多的高度设置(%s)和测量值(像素)，它们似乎不会以任何方式影响这个“空白” .

这里又是 CSS，因为 JSFiddle 链接需要代码，我已经删除了我确信不会影响任何东西的区域:

/*------------------------------------*\
    MAIN
\*------------------------------------*/
html{
    font-family:Calibri, Arial, sans-serif;
    background:url(http://dl.dropbox.com/u/2629908/adaptive/img/css/grid.png) top center repeat-y #fff;
    background:#fff;
    color:#666;
    height:101%;
    font-size-adjust:0.45;
}
h1{
    font-weight:bold;
    font-size:2em;
}
h2{
    font-weight:bold;
    font-size:1.5em;
}
small{
    color:#ccc;
}
a{
    color:#6b0c36;
    text-decoration:none;
    font-weight:bold;
}
a:hover{
    text-decoration:underline;
}
p{
    margin-bottom:20px;
}

/*------------------------------------*\
    ACCORDION
\*------------------------------------*/
.accordion{
    width:700px;
    overflow:hidden;
    list-style:none;
    margin-bottom:10px;
    text-shadow:1px 1px 1px rgba(0,0,0,0.25);
}
.accordion li{
    float:left;
    width:20%;
    overflow:hidden;
    height:250px;
    -moz-transition:width 0.2s ease-out;
    -webkit-transition:width 0.2s ease-out;
    -o-transition:width 0.2s ease-out;
    transition:width 0.2s ease-out;
}
.accordion li:first-of-type{
    -moz-border-radius:10px 0 0 10px;
    -webkit-border-radius:10px 0 0 10px;
    -o-border-radius:10px 0 0 10px;
    border-radius:10px 0 0 10px;
}
.accordion li:last-of-type{
    -moz-border-radius:0 10px 10px 0;
    -webkit-border-radius:0 10px 10px 0;
    -o-border-radius:0 10px 10px 0;
    border-radius:0 10px 10px 0;
}
.accordion div{
    padding:10px;
}
.accordion:hover li{
    width:10%;
}
.accordion li:hover{
    width:60%;
}
.slide-01   { background:#139fec; color:white; }            
.slide-02   { background:#118fd4; color:white; }            

/*------------------------------------*\
    VERTICAL
\*------------------------------------*/

#vertical{
    width:700px;
    height:300px;
}
#vertical li{
    height:14%;
    width:100%;
    -moz-transition:height 0.2s ease-out;
    -webkit-transition:height 0.2s ease-out;
    -o-transition:height 0.2s ease-out;
    transition:height 0.2s ease-out;
}
#vertical li:first-of-type{
    -moz-border-radius:10px 10px 0 0;
    -webkit-border-radius:10px 10px 0 0;
    -o-border-radius:10px 10px 0 0;
    border-radius:10px 10px 0 0;
}
#vertical li:last-of-type{
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    -o-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
}
#vertical:hover li{
    height:10%;
    width:100%;
}
#vertical li:hover{
    height:60%;
    width:100%;
}

一如既往地感谢您的帮助。

乔恩。

Answer 1

简单删除

#vertical:hover li{

    height:10%;
}