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;
}

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

1 个答案: