悬停时背景颜色变化不起作用（jquery）
Posted
技术标签:
【中文标题】悬停时背景颜色变化不起作用（jquery）【英文标题】：Background color change on hover not working (jquery) 【发布时间】：2022-01-10 22:57:42 【问题描述】：我希望有人可以帮助我解决我遇到的问题。将鼠标悬停在页面上的导航链接上时，我试图更改页面的背景颜色。我曾尝试为此使用 jquery（我的 js 代码的最后几行），但它似乎不起作用。我认为我的其他一些 Js 以某种方式进行了干扰，因为它之前在一个简单的测试页面上工作过。 https://codepen.io/adamkelly153/pen/gOGaJYq
$('#hover-01').on('mouseenter', function()
$('#hover-change').css('background-color', 'blue');
);
$('#hover-01').on('mouseleave', function()
$('#hover-change').css('background-color', 'red');
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hover-01">Hover this!</div>
<div id="hover-change">Background changes</div>非常感谢任何帮助！抱歉，如果我错过了一些关键信息，很高兴提供。 亚当
【问题讨论】：
您的代码似乎可以正常工作..？ 由于某种原因，id 为hover-01 的 span 未找到（返回 null）。
在您删除的笔代码中，您删除了 id：item.children[0].innerhtml = `<span style="--index: $idx;">$letter</span>`。请将相关代码添加到问题本身。
@Teemu 你能打开codepen吗？悬停在那里时背景保持黑色。抱歉，我在调试方面还不是很有经验，也找不到具体导致问题的原因。
在我之前的评论中，我已经指出了为什么找不到#hover-01。 SO 问题必须独立存在，解决问题所需的所有相关信息都应包含在问题中。
【参考方案1】：
我将#hover-01 更改为.proj-cat 并且工作！
$('.proj-cat').on('mouseenter', function()
$('#hover-change').css('background-color', 'blue');
);
$('.proj-cat').on('mouseleave', function()
$('#hover-change').css('background-color', 'red');
);
https://codepen.io/kian-kpt/pen/zYEvQjW
【讨论】：
对于其他人来说“.proj-cat 来自哪里？”它来自 OP 底部链接的 codepen。 #hover-01 应该是 #hover-change，它是实际的 id，但您也可以只使用 body，这也是该元素的有效选择器。【参考方案2】：
始终将 cdn 置于 jquery 之上，因为 jquery 仅在加载 cdn 时才有效..
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$('#hover-01').on('mouseenter', function()
$('#hover-change').css('background-color', 'blue');
);
$('#hover-01').on('mouseleave', function()
$('#hover-change').css('background-color', 'red');
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hover-01">Hover this!</div>
<div id="hover-change">Background changes</div>
【讨论】：
是的，jQuery 应该在你的代码之前加载，但是<script>s 应该放在 <body> 的末尾，否则 javascript 会尝试访问尚不存在的文档元素，这会抛出错误。以上是关于悬停时背景颜色变化不起作用（jquery）的主要内容，如果未能解决你的问题，请参考以下文章