使用.hover選擇器混合使用向上和向下鍵

Question

我有以下CSS選擇器，使用向上和向下鍵或鼠標指針突出顯示查找列表中的選定條目。問題是同時使用鍵盤和鼠標時，多個條目被突出顯示。以下是CSS條目。

&:hover, &.selected { 
       background: #205081; 
       label { 
        .title { 
         color: #fff; 
        } 
        .subTitle { 
         color: #ccc 
        } 
       } 
      } 

.selected CSS類是基於上下對解決此問題的關鍵events.Any建議，將不勝感激動態設置。謝謝

Answer 1

那麼，兄弟選擇器總是棘手。 鑑於您的樣式應用到ul，li，您可以使用招用父母的:hover像這樣採取:hover前.selected：

@mixin high-light() 
{ 
    background: #205081; 
    label { 
     .title { 
      color: #fff; 
     } 
     .subTitle { 
      color: #ccc 
     } 
    } 
} 
@mixin unhigh-light(){ 
    background: #fff; 
    label { 
     .title { 
      color: #000; 
     } 
     .subTitle { 
      color: #000 
     } 
    } 
} 
ul{ 
    &:hover{ 
     li{ 
      &.selected{ 
       @include unhigh-light(); 
      } 
     } 
    } 
    li{ 
     &:hover, &.selected, &.selected:hover { 
      @include high-light(); 
     } 
    } 
} 

這是HTML標記的樣本：

 <ul> 
      <li><label><span class="title">Item</span></label></li> 
      <li class="selected"> 
       <label><span class="title">Item</span></label> 
      </li> 
      <li><label><span class="title">Item</span></label></li> 
     </ul>