类改变悬停父元素的跨度

Class change span on hover parent element

本文关键字：元素 改变 悬停      更新时间：2023-09-26

我正在寻找一个简单的解决方案:我需要改变span的类，当我悬停父元素(按钮):

我的HTML: 

<button id="show_container_2">
   <span id="show_container_2_span" class="cl">TEXT</span>
</button>

和JS(使用Jquery):

$("#show_container_2").hover(
    function(){
        $("#show_container_2_span").removeClass("cl");
        $("#show_container_2_span").addClass("cl_hover");
    },
    function(){
        $("#show_container_2_span").removeClass("cl_hover");
        $("#show_container_2_span").addClass("cl");
    }
);

但这不起作用。有什么想法或更简单的解决方案吗?谢谢!

尝试在doc ready或其他类似事件上执行此操作

  $(function() {
    $("#show_container_2").hover(
      function () {
        $("#show_container_2_span").removeClass("cl");
        $("#show_container_2_span").addClass("cl_hover");
      },
      function () {
        $("#show_container_2_span").removeClass("cl_hover");
          $("#show_container_2_span").addClass("cl");
      }
    );
  });

您的代码很好，但是由于您要求

更简单的解决方案

我建议使用

.toggleClass ()

$("#show_container_2").hover(function () {
    $("#show_container_2_span").toggleClass("cl_hover");
  }
);

下面是相同的

相关文章：