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個元素

回答

相關問題