如何讓css影響同一容器中的其他div

Question

我想讓一個列表影響另一個列表...我已經做了一個例子小提琴試圖讓這個想通了..我只是卡住了！

基本上我有一個項目列表和圖像列表。 我想爲每個項目突出顯示不同的圖像顯示。 這裏是我的小提琴實物模型：http://jsfiddle.net/t9hznk0w/

基本容器是主要的div ...然後是項目列表，然後是圖像的另一個佔位符列表。在這個例子中，我簡單地試圖驗證概念（稍後我將通過更改不透明度來做到這一點），但是我似乎無法獲得第一個列表項目以在第二個列表項目被徘徊時產生影響。 在我的例子中，我只是試圖改變顏色和粗體的第二個元素。

請任何幫助，這將不勝感激！

HTML：

<div id="container"> 
    <ul id="container1"> 
     <li class="itm1">Item 1</li> 
     <li class="itm2">Item 2</li> 
     <li class="itm3">Item 3</li> 
    </ul> 
    <ul id="container2"> 
     <li class="img1">ITEM 1 IMAGE</li> 
     <li class="img2">ITEM 2 IMAGE</li> 
     <li class="img3">ITEM 3 IMAGE</li> 
    </ul> 
</div> 

CSS：

.itm1:hover ~ .img1 { 
font-weight: bold; 
color: red; 
} 
.img1:hover { 
color: green; 
} 
.itm1:hover { 
color: yellow; 
} 

我已經試過+>〜和各種組合 仍然沒有成功......請幫助！

Answer 1

由於您請求只有HTML和CSS的JS做到這一點比較容易，我改變了標記，以獲得您想要的東西。 CSS中缺少父母選擇器會使您的請求無法用於該標記。

.itm1:hover ~ .img1 { 
 
    color: red; 
 
} 
 
.itm2:hover ~ .img2 { 
 
    color: red; 
 
} 
 
.itm3:hover ~ .img3 { 
 
    color: red; 
 
} 
 
.img1:hover { 
 
    color: green; 
 
} 
 
#container ul li:hover { 
 
    color: red 
 
}

<div id="container"> 
 
    <ul id="container1"> 
 
     <li class="itm1">Item 1</li> 
 
     <li class="itm2">Item 2</li> 
 
     <li class="itm3">Item 3</li> 
 
     <br/> 
 
     <li class="img1 container2">THIS IS ITEM 1</li> 
 
     <li class="img2 container2">THIS IS ITEM 2</li> 
 
     <li class="img3 container2">THIS IS ITEM 3</li> 
 
    </ul> 
 
</div>

這是一個HTML和CSS唯一的解決辦法，而不是確保它符合您的要求。

Fiddle

Answer 2

這是無法完成的，因爲您試圖定位的兩個元素既不是兄弟也不是後代，並且CSS中沒有父級選擇器來遍歷DOM。您可以使用.index()

$("ul#container1").find("li").hover(function(){ 
    var index = $(this).index(); //index position of hovered li 
    $("#container2").find("li").eq(index).toggleClass("active"); //find same position in other ul 
}); 

FIDDLE

Answer 3

這聽起來像你想隱藏和顯示通過過濾器選項item元素。隱藏與選定項目不匹配的項目將被隱藏。同位素將是最好的解決方案http://isotope.metafizzy.co/filtering.html。我會選擇fitRows選項，因爲它適用於具有相同高度的物品。動畫更加酷爽。

對於一步幫助，最好一步安裝檢查http://bootstrapwp.com/?ref=14