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

Question

我正在寻找以下简单的解决方案：当我将父元素（按钮）悬停时，我需要跨度的更改类：

我的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

尝试对文档准备就绪或其他类似事件执行此操作

  $(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