懸停父元素上的類更改范圍

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