2

查看显示我在做什么的 JSfiddle：http: //jsfiddle.net/Amp3rsand/FPj3s/1/

HTML：

<ul id="navigation">
    <li><a href="#">BLAH</a></li>
    <li><a href="#">MORE <br /> BLAH</a></li>
    <li><a href="#">STILL <br /> MORE</a></li>
    <li><a href="#">YADDA <br /> YADDA</a></li>
    <li><a href="#">ETC ETC <br /> ETC ETC</a></li>
    <li><a href="#">FINISH</a></li>
</ul>

CSS：

body {
    font-size: 12px;}
}
#navigation {
    width: 600px;
    height: 50px;
    position: absolute;
    left: 20px;
    top: 25px;
}

#navigation li {
    list-style-type:none;
    width: 94px;
    height: 40px;
    display: block;
    float: left;
    margin: 0 5px 0 0;
    text-align: center;
    font-weight: bold;
    background: lightgrey;
}

#navigation li:first-child {
    border-top: 40px solid lightgrey;
    border-left: 25px solid transparent;
    height: 0;
    width: 70px;
    background: none;
}

#navigation li:first-child a {
    position: relative;
    top: -35px;
    right: 0px
}

#navigation li:last-child {
    border-top: 40px solid lightgrey;
    border-right: 25px solid transparent;
    height: 0;
    width: 70px;
    background: none;
}

#navigation li:last-child a {
    position: relative;
    top: -35px;
    left: 5px;
}
#navigation li:last-child a:hover {
    top: -35px;
    left: 5px;
}

#navigation li a {
    display: block;
    height: 40px;
    text-decoration: none;
    color:#000;
}

#navigation li a:hover {
    background: grey;
}

浅灰色的形状是我希望悬停的样子。只有第一个和最后一个孩子需要看起来不同，但我不确定如何在不破坏布局的情况下在悬停时弄乱边框。由于边界恶作剧，我不得不移动第一个和最后一个'a'元素，现在我被卡住了。你有什么建议？

编辑：我刚刚意识到我可以这样做来改变悬停位的形状，但链接位置仍然会造成问题

#navigation li:last-child a:hover {
    border-top: 40px solid grey;
    border-right: 25px solid transparent;
    height: 0;
    width: 70px;
    background: none;
}

在 JS Fiddle 上现场观看

4

2 回答 2

3

您要更改的属性是<li>元素的属性，因此以列表项悬停状态为目标并更改背景和边框颜色

#navigation li:hover {
    background: grey;
}

#navigation li:first-child:hover,
#navigation li:last-child:hover{
    background: none;
    border-top-color: grey;
}

更新的小提琴

于 2013-08-12T05:31:32.970 回答
2

本质上，您希望将第一个/最后一个孩子的“border-top”设置为灰色。

您可以在 CSS 中使用：

#navigation li:first-child:hover {
border-top: 40px solid lightgrey;
}

但这对我来说在 Google Chrome 中不起作用，所以也许只是使用 jQuery 将其应用为悬停效果？

于 2013-08-12T05:30:12.487 回答