CSS：在另一個div的a：hover上更改div的屬性。可能嗎？怎麼樣？

請參考此fiddle請。
我想要做的是懸停在a -tag裏面#menu ul li,background-color顏色的#header-bottom也必須改變爲與a -tag的background-color類似。我該如何做到這一點？CSS：在另一個div的a：hover上更改div的屬性。可能嗎？怎麼樣？

UPDATE
用CSS做的只有yippie！ :) Here is the fiddle

來源

2012-03-14 Asif

我不是一個JavaScript忍者，但我認爲你在找什麼正在改變與'的onmouseover（）'風格屬性。 – CoffeeRain 2012-03-14 19:34:27

你不能用CSS和你當前的結構做到這一點。沒有辦法鏈接DOM元素來影響父項（因此是CSS的「級聯」部分）。 – mrtsherman 2012-03-14 19:35:44

我急於尋找一些CSS技巧？有沒有辦法？ – Asif 2012-03-14 19:36:05

這裏是一個jQuery方法（抱歉太多的努力，使這個JavaScript只爲我）。它可以被翻譯。

http://jsfiddle.net/PCbVs/9/

$('.menu').hover(

function() { 
    var color = $(this).css('borderLeftColor'); 
    console.log(color); 
    $('#header-bottom').css('backgroundColor', color); 
}, function() { 

});

或者使用jQuery UI動畫風格的轉變。

http://jsfiddle.net/PCbVs/10/

$('.menu').hover(

function() { 
    var color = $(this).css('borderLeftColor'); 
    console.log(color); 
    $('#header-bottom').stop().animate({ backgroundColor: color }, 500); 
}, function() { 

});

來源

2012-03-14 20:20:44 mrtsherman

謝謝@ mrtsherman！還有一件事，'＃header-bottom' wikk的顏色必須在鼠標退出時更改爲'current'菜單項，例如，如果我在'product'頁面上，默認顏色應該是產品邊框的顏色，在鼠標上輸入的顏色應該在鼠標出口處最終變爲各自的菜單項的邊框顏色，顏色應該恢復爲默認當前菜單項的顏色。。。我希望我很清楚。 – Asif 2012-03-14 20:27:23

爲當前鏈接添加一個「active」類。然後在鼠標上恢復顏色。 http://jsfiddle.net/PCbVs/11/ – mrtsherman 2012-03-14 20:31:21

它的工作原理是我想要的。非常感謝。 – Asif 2012-03-14 20:34:06

CSS：在另一個div的a：hover上更改div的屬性。可能嗎？怎麼樣？

回答

相關問題