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>标签包装在一个“显示块”元素中，该元素可以匹配<li>. 您只需要在新包装器元素上添加/删除背景颜色（否则，您必须将旧背景颜色保存为在鼠标移出时恢复的状态）..

这是 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','');
});