0

我试图让我的 jQuery 导航工作，但它不会像我想要的那样。这是一个名为kwicks. 我希望在导航滑出时有文字。

我会将我的HTML 和 CSS 放在一个 jsFiddle中，并给出该站点的测试页面的链接，这样您就可以查看编码。

提前致谢

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

1 回答 1

0

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

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

还将其添加到您的CSS：

ul#kwickslist li:hover .kwicks_inner_inner .smallText {
    display:block;
}
于 2012-12-20T11:35:16.980 回答