jquery - 导航 jquery 插件不会按预期运行

Question

我正在尝试让我的 jQuery 导航正常工作，但它不会像我希望的那样运行。这是一个名为 kwicks 的插件。当导航滑出时，我希望有文本。

我会把我的 HTML and CSS in a jsFiddle , 我会给出 test page of the site 的链接，这样您就可以查看编码。

提前致谢

HTML

<ul id="kwickslist" class='kwicks kwicks-horizontal'> 
    <li id='panel-1'> 
        <div class="kwicks_inner_inner"> 
            <div class="navimage"><a id="index2" href="index.html">test</a></div> 
            <div class="smallText"> <p>Cyberia Design.</p></div> 
        </div> 
    </li> 
    <li id='panel-2'>
        <div class="kwicks_inner"> 
            <div class="navimage"><a id="about2" href="about.html">test</a></div> 
            <div class="smallText">About.</div> 
        </div> 
    </li> 
    <li id='panel-3'> 
        <div class="kwicks_inner"> 
            <div class="navimage"><a id="work2" href="work.html">test</a></div> 
            <div class="smallText">Work.</div> 
        </div> 
    </li> 
    <li id='panel-4'> 
        <div class="kwicks_inner"> 
            <div class="navimage"><a id="contact2" href="contact.html">test</a></div> 
            <div class="smallText">Contact.</div> 
        </div> 
    </li> 
</ul>

CSS

.kwicks {
    display: block;
    list-style-type: none;
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}
.kwicks > * {
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.kwicks.kwicks-processed > * {
    margin: 0;
    position: absolute;
}
.kwicks-horizontal > * {
    float: left;
}
.kwicks-horizontal > :first-child {
    margin-left: 0;
}
.kwicks-vertical > :first-child {
    margin-top: 0;
}
.kwicks {
    width: 515px;
    height: 100px;
}
.kwicks > li {
    width: 50px;
    height: 50px;
    /* overridden by kwicks but good for when JavaScript is disabled */
    margin-left: 5px;
    float: left;
}

#panel-1 { 
    background-color: #141414; 
}

#panel-2 { 
    background-color: #141414; 
}
#panel-3 { background-color: #141414; }
#panel-4 { background-color: #141414; }

#kwickslist li { 
    float: left; 
    width: 75px; 
    height: 50px; 
} 
#kwickslist .kwicks_inner { 
    width: 200px; 
} 
#kwickslist .navimage {  
    height: 50px; 
    float: left; 
} 
#kwickslist .smallText { 
    display: none; 
    text-align: center; 
    width: 50px; 
    color: white; 
    font-size: 10px; 
    margin-top: 5px; 
    float: right; 
} 
#kwickslist li.active.smallText { 
    display: block; 
}

Answer 1

尝试将“a”标签上的文本缩进属性设置回“0”，因为目前它们在悬停时仍设置为“-9999px”。

可能还需要将它们的颜色设置为白色。

同时将此添加到您的 CSS 中:

ul#kwickslist li:hover .kwicks_inner_inner .smallText {
    display:block;
}