jae
jae

Reputation: 13

how to show closest div on hover?

i want to hover over a child element for it to show the NEAREST footer div on tumblr.

<div class="entry">
{block:Posts}
<div class="container">
{block:Text}{/block:Text}
{block:Photo}{/block:Photo}
{block:Text}{/block:Text}
</div>
<div class="footer"></div>
{/block:Posts}
</div>

the footer class is to be hidden but i want it so that when i hover over any one of the post type, only the footer of that post shows.

example :

i hover over my text post about something, it'll show the footer of THAT post specifically!

any help would be appreciated!

edit : i think my circumstances weren't properly explained so i updated!

Upvotes: 0

Views: 1682

Answers (3)

Colin Cline
Colin Cline

Reputation: 1279

Use jquery next() function and mouseneter, mouseleave to simulate hover effect:

CSS:

.one {}
.two {display:none;}

javascript:

jQuery('.one').on('mouseenter', function(){
    $(this).next('.two').css('display', 'block');
});

jQuery('.one').on('mouseleave', function(){
    $(this).next('.two').css('display', 'none');
});

jsfiddle

Upvotes: 0

epascarello
epascarello

Reputation: 207527

You really do not need JavaScript when a simple CSS hover and next sibling selector can show it.

.two {
   display: none;
}

.one:hover + .two {
  display: block;
}

/* If you want it to stay open if you are on the other div*/
.two:hover {
  display: block;
}
<div class="one">hi</div>
<div class="two">this</div>

<div class="one">is</div>
<div class="two">an</div>

<div class="one">example</div>
<div class="two">code</div>

Upvotes: 0

Taplar
Taplar

Reputation: 24965

You can have a css rule that conditionally hides the two, so long as the one is not hovered.

.one:not(:hover) + .two {
  display: none;
}
<div class="one">hi</div>
<div class="two">this</div>

<div class="one">is</div>
<div class="two">an</div>

<div class="one">example</div>
<div class="two">code</div>

Upvotes: 3

Related Questions