javascript - 使用 jQuery 设置 css 样式

Question

我需要使用 jQuery 将 css 样式设置为以下元素

#hdr-nav-wrapper ul li:hover a{ 
    background-color:#0294ca;
}

 #hdr-nav-wrapper ul a:hover{ 
   background-color:#00aeff;
} 

除了实际颜色必须根据 ID 为“TestDiv”的 div 的背景颜色而动态变化。该站点有一个主题引擎，用户可以在其中使用颜色主题调色板更改颜色。我在网站顶部附加了一个导航栏，但我希望导航栏的背景与“TestDiv”当前的背景相同。

如何使用动态逻辑将上述 css 转换为 jQuery？

Answer 1

使用 jQuery .hover()和 .css() .为了使背景颜色的交换更容易，请包装您的 <a> “显示 block ”元素中的标签可以匹配 <li> 的尺寸.您只需要在新包装元素上添加/删除背景颜色(否则，您必须将旧背景颜色保存在一个状态中，以便在鼠标移出时恢复到该状态)。

Here is a demo in jsfiddle .

HTML:

<ul>
    <li><div><a>test</a></div></li>
    <li><div><a>test</a></div></li>
</ul>
<div id="TestDiv" style="background-color:blue;">&nbsp;</div>

CSS:

li {
    background-color: orange;
}

jQuery:

$('ul li').hover(function() { 
    var $el = $(this).find('div');
    if($el.length > 0) {
        $el.css('background-color', $('#TestDiv').css('background-color'));
    }
}, function() {
    var $el = $(this).find('div');
    if($el.length > 0)
        $el.css('background-color','');
});