Hover over div to reveal nested span with jQuery

Question

I thought this would work outright, but I must be missing something.

I have a nested span of content in a div and I'm trying to get that span to show on hover (and hide on mouseout).

I thought that just doing a $(this).find('.name-of-span') inside of a hover` function would do it, but something must be missing.

This is what I have:

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();
  });

I thought that should work, but again, I'm probably missing something.

I also tried to do this with CSS with an adjacent sibling selector, but that wasn't working either.

Answer 1

You can construct a CSS rule that only hides the nested element if the parent is not hovered.

 .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> 

Otherwise, your existing logic does work. You're just missing the second method that reverts the show.

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

this is working. First, the going to show element must be '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> 

Also usable children() instead of find()

Answer 3

Hide all the link before displaying the selected one.

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

Use jQuery to add and remove classes to toggle display, teamed up with the '.children' for targeted selection

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