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

使用jQuery设置css样式

1 个答案: