Question

当我将鼠标悬停在链接上时，我需要更改#hse div的类，并在mouseout时恢复为默认类。已为该链接分配了ID“ #hselink”。我将下面的脚本放入WP标头中，但无法正常工作。（该站点无法查看。）

我尝试使用提供的脚本在此处进行搜索，并且div不变。

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

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

Answer 1

通过将no shadow样式作为div的默认样式，然后简单地切换boxshadow的类，可以简化您的过程。

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

Answer 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>

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

2 个答案: