导航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‘标记悬停在其上时，请尝试将其text-indent属性设置回'0’，因为当前它们在悬停时仍设置为'-9999px‘。

可能也需要将它们的颜色设置为白色之类的颜色。

还要将这个添加到你的css中：

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