Reputation: 13
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
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');
});
Upvotes: 0
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
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