試圖通過懸停在一個div上將類添加到多個div

基本上，我有一個由五個不同顏色的垂直條紋組成的頁面。這些最終將鏈接到不同的部分或類似的東西。試圖通過懸停在一個div上將類添加到多個div

看看這個小提琴拿到我說的是什麼總體思路：http://jsfiddle.net/nolbear/4fea3/

這裏是我的JavaScript：

$('#banner1').hover(function() { 
    $(this).toggleClass('forty'); 
    $('#banner2').toggleClass('twenty'); 
    $('#banner3').toggleClass('twenty'); 
    $('#banner4').toggleClass('ten'); 
    $('#banner5').toggleClass('ten');  
});

我想要得到它，這樣，當你將鼠標懸停在頂部條紋變大，其他所有條紋變小以補償。條紋應始終佔據頁面的整個高度（這就是爲什麼我使用百分比）。

我不明白爲什麼我寫的代碼無法正常工作，我直接從其他已經回答的StackOverflow問題中直接得知它，但它仍然不適用於我。

來源

2013-07-28 Nolan Manning

第一個問題是，你沒有在你的小提琴設置的jQuery

次，您的ID將覆蓋類值所以不是我的風格類設置他們的高度。

http://jsfiddle.net/4fea3/4/

<div id="banner1" class="banner"> 
</div> 

<div id="banner2" class="banner"> 
</div> 

<div id="banner3" class="banner"> 
</div> 

<div id="banner4" class="banner"> 
</div> 

<div id="banner5" class="banner"> 
</div> 

.banner { 
    width: 100%; 
    height: 20%; 
    transition: all 0.2s ease 0.0s; 
    -moz-transition: all 0.2s ease 0.0s; 
    -webkit-transition: all 0.2s ease 0.0s; 
    -o-transition: all 0.2s ease 0.0s; 
    -ms-transition: all 0.2s ease 0.0s; 
    overflow: hidden; 
}

來源

2013-07-28 03:28:30 John

嘆息。 +1因爲你打敗了我。我做了http://jsfiddle.net/4fea3/5/ –

是否有某些原因可以在jsfiddle上工作，但是當我嘗試將它放在Dreamweaver上時不會有這個原因嗎？ –

@NolanManning我只能猜測你沒有把它正確。你包括jquery js文件，對嗎？你的小提琴沒有它。 –

你的代碼正在工作，它只是沒有工作的CSS。您已將height: 20%應用於每個橫幅，然後將height: x%應用於您希望更改橫幅高度的每個CSS類。不幸的是，第一個height: 20%將覆蓋此。我已使用!important將它修復在小提琴中：http://jsfiddle.net/4fea3/3/

理想情況下，您應避免!important並更新樣式以在添加類時正確覆蓋。

來源

2013-07-28 03:28:18 mash

試圖通過懸停在一個div上將類添加到多個div

回答

相關問題