jQueryで入れ子になったスパンを明らかにするためにdivの上にカーソルを合わせ

私はこれが完全に機能すると思いました、しかし私は何かが足りないはずです。

divにコンテンツのネストされた span があり、そのスパンをホバーに表示するように(そしてマウスを外に隠すように)しています。

hover`関数内で $(this).find( '。name-of-span')を実行するだけでうまくいくと思いましたが、何かが欠けているに違いありません。

これは私が持っているものです:

HTML:

<div class="parent-item">
    

title 01

        
          Link
        
</div>

<div class="parent-item">
        

title 02

            
              Link
            
    </div>

JS:

  $('.parent-item').hover(function() {
    $(this).find('.meta--reveal').show();
  });

私は動作するはずだと思いましたが、ここでもまた何かが足りないことがあります。

私はまた隣接する兄弟セレクタを持つCSSでこれをやろうとしました、しかしそれはまたうまくいきませんでした。

1
nl ru de
あなたのジャバスクリプトの試みは、それが子供を見せていたが、あなたがホバー状態を去った後にそれを隠さないという問題でしたか?ホバーを開始する方法は指定したが、ショーを元に戻すホバーを終了する方法は指定しなかった
追加された 著者 Taplar,
私の答えを見てください。あなたの論理はうまくいきます。あなたはホバーのための二次関数を見逃しています。
追加された 著者 Taplar,

4 答え

親がホバーされていない場合にのみ、ネストされた要素を非表示にするCSSルールを作成できます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.parent-item:not(:hover) .meta--reveal {
  display: none;
}
<div class="parent-item">
  

title 01

  
    Link
  
</div>

<div class="parent-item">
  

title 02

  
    Link
  
</div>
</div> </div>

それ以外の場合は、既存のロジックは機能します。ショーを元に戻す2番目の方法が足りないのです。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

  $('.parent-item').hover(function() {
    $(this).find('.meta--reveal').show();
  }, function(){
    $(this).find('.meta--reveal').hide();
  });
.parent-item .meta--reveal {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-item">
  

title 01

  
    Link
  
</div>

<div class="parent-item">
  

title 02

  
    Link
  
</div>
</div> </div>

2
追加された

これはうまくいっています。まず、表示する要素は 'display:none'でなければなりません。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

  $('.parent-item').hover(function() {
    $(this).find('.meta--reveal').show();
  });
.meta--reveal {
  display:none;
}
<div class="parent-item">
    

title 01

        
          Link
        
</div>

<div class="parent-item">
        

title 02

            
              Link
            
 </div>
    
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</div> </div>

Also usable children() instead of find()

1
追加された
私が今見つけたたくさんの@Taplarに感謝します。
追加された 著者 Dogukan Cavus,

選択したリンクを表示する前に、すべてのリンクを非表示にします。

$('.parent-item').hover(function() {
    //選択したリンクを表示する前に、すべてのリンクを非表示にします。 
    $('.meta--reveal').hide();
    //displays the selected  item
    $(this).find('.meta--reveal').show();
  });
0
追加された

Jquaryを使用して表示を切り替えるクラスを追加および削除します。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {

$(".hover").mouseover(function() {
    $(this).children('.target').removeClass("hide").addClass("reveal");
});

$(".hover").mouseleave(function() {
    $(this).children('.target').removeClass("reveal").addClass("hide");
});

});
.hide {
  display: none;
}

.reveal {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="hover">
  

title 01

  <div class="target hide">
  Link
</div>
</div>  



<div class="hover">
  

title 02

<div class="target hide">
  Link
</div>
</div>  
</div> </div>

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript