2

所以我有一些 CSS 生成这个。

CSS 菜单

HTML 代码如下。

<div class="menu">
                <ul>
                <li><a href='index.html'>Home</a></li>
                <div class="menutab"></div>
                <li><a href='about_us.html'>About Us</a></li>
                <div class="menutab"></div>
                <li><a href='#'>Order Online</a></li>
                <div class="menutab"></div>
                <li><a href='gallery.html'>Gallery</a></li>
                <div class="menutab"></div>
                <li><a href='#'>Contact Us</a></li>
                <div class="menutab"></div>
                </ul>
            </div>

和 CSS

.menu {
    width: 100%;
    height: 220px;
    float: left;
    margin-left: -20px;
    position: relative;
    text-align: center;
}

.menu li{
    display: block;
    list-style: none;
    width: 100%;
    background: #EBE5D9;
    height: 50px;
    margin-left: -40px;
    margin-top: 5px;
    line-height: 50px;
}

.menu li:hover {
    background: #AEC32A;
}


.menu li a{
    text-decoration: none;
    font-size: 20px;
    color: #000000;
    font-family: fantasy;
}



.menutab {
    width: 30px;
    position: relative;
    margin-top: -3px;
    margin-left: -71px;
    border-right: 21px solid #EBE5D9;
    border-bottom: 21px solid transparent;
}

基本上我想要的是悬停效果将整个东西变成绿色，目前 .menu li:hover 将块变成颜色 #AEC32A 但我也希望它把 .menutab 边框变成相同的颜色，无论如何这样做？最好不使用Javascript。

在此先感谢您的帮助 ：-）

4

2 回答 2

5

试试相邻的选择器。

.menu li:hover+.menutab {
    border-right-color: #AEC32A;
}

JS Bin 演示

于 2013-02-18T15:57:10.920 回答
4

这对相邻的兄弟组合器没有问题。

只需将其添加到您的 CSS 中：

.menu li:hover + .menutab{
    border-right-color: #AEC32A;
}

这将选择第一个元素 ( ) 的紧接.menutab在前的元素 ( .menu li:hover)。

看现场演示

如果您不关心旧的 IE，浏览器支持是 100% <(=) 8;)

于 2013-02-18T15:58:11.500 回答