使用 jQuery 设置 css 样式

Setting css styles using jQuery

本文关键字：样式 css 设置 jQuery 使用      更新时间：2023-09-26

我需要使用 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？

使用 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;
}

j查询：

$('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','');
});
相关文章：