CSS：悬停影响2个元素

CSS Menu

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

基本上，我想是悬停效果把整个事情的绿色，目前李。菜单：悬停转动块颜色＃AEC32A但我也想要将.menutab边框变成相同的颜色，无论如何要做到这一点？最好不使用Javascript。

在此先感谢您的帮助:-)

来源

2013-02-18 AppleTattooGuy

这与adjacent sibling combinator没有问题。

只需添加到您的CSS：

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

这将选择第一个元素（.menu li:hover）的紧接前件（.menutab）。

看到live demo

Browser-support是100％，如果你不爱老的IE <（=）8;）

来源

2013-02-18 15:58:11 Christoph

非常感谢您的帮助，完美工作:-) – AppleTattooGuy 2013-02-18 16:09:22

尝试相邻的选择器。

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

JS Bin Demo

来源

2013-02-18 15:57:10 hsan

此。也支持IE8以上。 – cosmicsafari 2013-02-18 16:03:20

@cosmicsafari在IE7中也支持一些错误。 – Christoph 2013-02-18 16:05:55

CSS：悬停影响2个元素

回答

相关问题