.hoverを用いたjQueryでの実装について

Question

前提・実現したいこと

jQueryで.header-contents-jsクラスにマウスが乗れば、
新たな.header-contents-detailクラスを出現させ、
その後、.header-contents-jsクラスと.header-contents-detailクラスの
どちらにもマウスが載ってなければ、
.header-contents-detailクラスを消すという処理をしたいのですが、うまくいきません。
下のコードをどのようにすればできるのか、教えていただきたいです。
よろしくお願いいたします。

該当のソースコード

  $(".header-contents-js").hover(
    function () {
      $(".header-contents-detail").stop().fadeIn(400);
    },
    function () {

      $(".header-contents-detail").hover(

        function () {},

        function () {
          $(".header-contents-detail").stop().fadeOut(400);
        }
      )
    }
  )

Comments

[Lhankor_Mhy]

.header-contents-detail は .header-contents-js の子孫ですか？

[sharara]

子孫になっています。

Answer 1

こんばんは。

子孫要素ならば、これでいいと思います。

サンプル

  $(".header-contents-js").hover(
    function () {
      $(".header-contents-detail").stop().fadeIn(400);
    },
    function () {
          $(".header-contents-detail").stop().fadeOut(400);
    }
  )

Comments

[sharara]

ありがとうございます！！