Question

我正在寻找这个的简单解决方案：当我悬停父元素（按钮）时，我需要更改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");
    }
);

但这不起作用。任何想法或更简单的解决方案？谢谢！

Answer 1

尝试在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");
      }
    );

  });

Answer 2

您的代码很好，但是因为您要求

更简单的解决方案

我建议使用

.toggleClass（）

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

以下是同一

的jsfiddle

悬停父元素上的类更改范围

2 个答案: