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的属性。可能吗？怎么样？

回答

相关问题