將鼠標懸停在div上以顯示jQuery的嵌套范圍

Question

我以為這可以完全解決問題，但我必須缺少一些東西。

我在div中有一個嵌套的內容span ，並且我試圖使該范圍在懸停時顯示（並在mouseout上隱藏）。

我以為只是在懸停函數$(this).find('.name-of-span') inside of a執行$(this).find('.name-of-span') inside of a就能做到，但是一定要缺少一些東西。

這就是我所擁有的：

HTML：

<div class="parent-item">
    <h3>title 01</h3>
        <span class="meta--reveal">
          <a class="btn" href="#">Link</a>
        </span>
</div>

<div class="parent-item">
        <h3>title 02</h3>
            <span class="meta--reveal">
              <a class="btn" href="#">Link</a>
            </span>
    </div>

JS：

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

我認為應該可以，但是再次，我可能會丟失一些東西。

我也嘗試使用帶有相鄰兄弟選擇器的CSS來做到這一點，但這都不起作用。

Answer 1

您可以構造一個CSS規則，該規則僅在父對象未懸停時才隱藏嵌套元素。

 .parent-item:not(:hover) .meta--reveal { display: none; } 

 <div class="parent-item"> <h3>title 01</h3> <span class="meta--reveal"> <a class="btn" href="#">Link</a> </span> </div> <div class="parent-item"> <h3>title 02</h3> <span class="meta--reveal"> <a class="btn" href="#">Link</a> </span> </div> 

否則，現有的邏輯確實工作。 您只是缺少第二種還原顯示的方法。

  $('.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"> <h3>title 01</h3> <span class="meta--reveal"> <a class="btn" href="#">Link</a> </span> </div> <div class="parent-item"> <h3>title 02</h3> <span class="meta--reveal"> <a class="btn" href="#">Link</a> </span> </div> 

Answer 2

這正在工作。 首先，將要顯示的元素必須為“ display：none”。

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

 .meta--reveal { display:none; } 

 <div class="parent-item"> <h3>title 01</h3> <span class="meta--reveal"> <a class="btn" href="#">Link</a> </span> </div> <div class="parent-item"> <h3>title 02</h3> <span class="meta--reveal"> <a class="btn" href="#">Link</a> </span> </div> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 

也可以使用children()而不是find()

Answer 3

隱藏所有鏈接，然后顯示所選鏈接。

$('.parent-item').hover(function() {
    //hide all the link before displaying the selected one. 
    $('.meta--reveal').hide();
    //displays the selected  item
    $(this).find('.meta--reveal').show();
  });

Answer 4

使用jQuery添加和刪除類以切換顯示，與'.children'一起進行有針對性的選擇

 $(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"> <h3>title 01</h3> <div class="target hide"> <span class="metaReveal"><a class="btn" href="#">Link</a></span> </div> </div> <div class="hover"> <h3>title 02</h3> <div class="target hide"> <span class="metaReveal"><a class="btn" href="#">Link</a></span> </div> </div>