如何懸停多個項目？

我想當用戶hover超過Egipat那個價格也是hovered。這可能只有CSS或我需要使用JQuery？如何懸停多個項目？

<div class="col-sm-10 col-xs-12"> 
    <div class="col-sm-6 col-xs-5 tabela"> 
     <h5>Egipat 14.6-14.7</h5> 
    </div> 
    <div class="col-sm-2 col-xs-4 tabela2"> 
     <h5> 
      <i class="fa fa-star"></i> 
      <i class="fa fa-star"></i> 
      <i class="fa fa-star"></i> 
      <i class="fa fa-star blue"></i> 
      <i class="fa fa-star blue"></i> 
     </h5> 
    </div> 
    <div class="col-sm-3 col-xs-3 tabela3"> 
     <h5>Price: 385 kn</h5> 
    </div> 
</div>

來源

2015-11-26 None

不，它不是可能的，你不能去父母在CSS，你只能去旁邊或子元素

僅當您檢查第一個div的懸停在HTML代碼中

col-sm-10:hover > div > h5{ 
/*do something*/ 
}

來源

2015-11-26 14:03:43 Rickert

As there is no parent selector in CSS，你可以hover父本身+使用adjacent sibling selectors：

.tabela:hover,    /* "Egipat" container */ 
 
.tabela:hover + div + div /* "price" container */ 
 
{ 
 
    color: red; 
 
}

<div class="col-sm-10 col-xs-12"> 
 
    <div class="col-sm-6 col-xs-5 tabela"> 
 
     <h5>Egipat 14.6-14.7</h5> 
 
    </div> 
 
    <div class="col-sm-2 col-xs-4 tabela2"> 
 
     <h5> 
 
      <i class="fa fa-star"></i> 
 
      <i class="fa fa-star"></i> 
 
      <i class="fa fa-star"></i> 
 
      <i class="fa fa-star blue"></i> 
 
      <i class="fa fa-star blue"></i> 
 
     </h5> 
 
    </div> 
 
    <div class="col-sm-3 col-xs-3 tabela3"> 
 
     <h5>Price: 385 kn</h5> 
 
    </div> 
 
</div>

來源

2015-11-26 14:04:42 Vucko

您可以使用一般兄弟選擇器~;你可以閱讀更多關於它here：

.tabela:hover { 
 
    background-color: #ccc; 
 
} 
 
.tabela:hover ~ .tabela3 { 
 
    background-color: #ccc; 
 
}

<div class="col-sm-10 col-xs-12"> 
 
    <div class="col-sm-6 col-xs-5 tabela"> 
 
    <h5>Egipat 14.6-14.7</h5>&lt;--hover 
 
    </div> 
 
    <div class="col-sm-2 col-xs-4 tabela2"> 
 
    <h5> 
 
     <i class="fa fa-star"></i> 
 
     <i class="fa fa-star"></i> 
 
     <i class="fa fa-star"></i> 
 
     <i class="fa fa-star blue"></i> 
 
     <i class="fa fa-star blue"></i> 
 
     </h5> 
 
    </div> 
 
    <div class="col-sm-3 col-xs-3 tabela3"> 
 
    <h5>Price: 385 kn</h5>&lt;--hover 
 
    </div> 
 
</div>

這給你比相鄰兄弟選擇了更大的靈活性，因爲該元素的順序並不重要一樣多。你可以在tabela2 div之後粘貼另一個元素，並且仍然有效。

來源

2015-11-26 14:08:49 Pavlin

巧妙的把戲，我已經刪除了我的答案。我不知道這一點，但會開始使用它。 TNX！ –

你可以擴展你的答案，並展示它如何工作，當我懸停任何元素（如果可能的話）？我似乎無法找到合適的選擇器。簡單地顛倒邏輯太容易 –

不幸的是，你不能扭轉這種影響。一般的兄弟選擇器需要在DOM中的目標元素之前聲明第一個元素。所以在這種情況下，'.tabela'必須位於DOM中的'.tabela3'前面。就我所知，沒有辦法做反向選擇。我想你會需要JavaScript。 – Pavlin

如何懸停多個項目？

回答

相關問題