使用 JQuery 将鼠标悬停在链接上时如何更改单独 div 的类答案

【问题标题】：How to change class of separate div when hovering over link using JQuery使用 JQuery 将鼠标悬停在链接上时如何更改单独 div 的类
【发布时间】：2019-04-18 02:13:21
【问题描述】：

当鼠标悬停在链接上时，我需要更改#hse div 的类，并在鼠标移出时恢复为默认类。该链接已分配 ID“#hselink”。我将下面的脚本放入 WP 标题中，但它不起作用。（该网站无法查看。）

我已经尝试在这里搜索，使用提供的脚本，并且 div 没有改变。

<a href="#" id="hselink">Health, Safety &amp; The Environment</a>

<script>
$("#hselink").mouseover(function(){
  $("#hse").addClass("boxshadow").removeClass("noshadow")
})
</script>

【问题讨论】：

标签： jquery wordpress

【解决方案1】：

您可以通过将无阴影样式设置为 div 的默认样式来简化您的流程，然后只需切换 boxshadow 的类。

<script>
jQuery(document).ready(function(){
    jQuery(document).on("mouseover", "#hselink", function(){
        jQuery("#hse").toggleClass("boxshadow");
    });
});
</script>

【讨论】：

生成的 - “Uncaught SyntaxError: Unexpected identifier”
@adriancollins 抱歉，我打错字了，{ 在function() 之后没有开始
非常感谢！
所以，现在它显示了 - (index):91 Uncaught TypeError: $ is not a function
您的网站是否包含 jquery？

【解决方案2】：

您可以附加一个 mouseenter 事件和一个 mouseleave 事件，它们可以来回翻转。

$('#hselink')
  .on('mouseenter', function(){
    $('#hse').addClass('boxshadow').removeClass('noshadow');
  })
  .on('mouseleave', function(){
    $('#hse').removeClass('boxshadow').addClass('noshadow');
  });

.noshadow { color: blue; }
.boxshadow { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="hselink">Health, Safety &amp; The Environment</a>
<div id="hse" class="noshadow">Toggle Me</div>

【讨论】：

谢谢，但在这些脚本中我不断收到：未捕获的 TypeError: $ is not a function
这意味着您的页面中没有包含 jQuery，或者它在noConflict 模式下运行，这意味着您需要使用jQuery 代替$。 @adriancollins
谢谢，就是这样，它似乎正在加载。