CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ultraloveninja
ultraloveninja

Reputation: 2139

Hover over div to reveal nested span with jQuery

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

Upvotes: 1

Views: 146

Answers (4)

crffty
crffty

Reputation: 444

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>

Upvotes: 0

Jackson
Jackson

Reputation: 149

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

Upvotes: 0

doğukan
doğukan

Reputation: 27441

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

Upvotes: 1

Taplar
Taplar

Reputation: 24965

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>

Upvotes: 3

Related Questions