I have a div that shows a div when hovering over it, but the nested div makes it looks like someone can type REALLY fast, instead I want it to appear instant. How do I do this?
The nested div markup:
div(parent) > div(child) > p(scrolls now, needs to be instant).
Cheers
EDIT: full code
<div class="small-12 group bookmark" id="bookmark1">
<a href="#"class="small-9 left">
<h2>Title</h2>
</a>
<a href="#" class="small-3 right" align="right">
5 Oktember 2015
</a>
<p class="bookmarkbody">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae libero quos voluptates cupiditate tempore, architecto nulla excepturi voluptatem assumenda officia qui laborum dolores dicta nisi fuga dolorem nostrum commodi sint accusamus vitae, quibusdam perferendis inventore culpa veritatis esse! Consequatur harum inventore numquam quidem doloremque.</p>
<div id="note" class="note" style="display:none;">
<p class="notebody" style="display:none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ipsum ad accsantium quo dignissimos esse aspernatur rem assumenda officiis quidem quos non temporibus neque cumque ipsa doloribus eveniet.</p>
And the jquery:
$('#bookmark1').hover ( function() {
$(this).children('.note').show ("slow");
$(this).find('.notebody').show("fast");
});
$('#bookmark1').mouseleave ( function() {
$(this).children('.notebody').hide ("fast");
$(this).children('.note').hide("slow");
});
答案 0 :(得分:1)
You can omit the passed string value in .show()
method:
$('#bookmark1').on({
mouseenter:function() {
$(this).find('.note, .notebody').show();
},
mouseleave:function() {
$(this).find('.notebody, .note').hide();
}
});
And i suggest you to use object literal to bind the events with .on()
method.
With no parameters, the .show() method is the simplest way to display an element:
$( ".target" ).show();
The matched elements will be revealed immediately, with no animation.