When working with this jsFiddle, it appears that the jQuery .show() function does not behave as expected. Despite the documentation stating that it should revert CSS attributes to their original values, using .show(x).delay(x).hide(x) seems to cause the CSS hover code to stop functioning:
Here is the Javascript code being used:
$('.product').on('click', function(){
$('.drawer').html("Something in your basket")
.show(200).delay(500).hide(200);
});
And the corresponding CSS code:
.drawer {
border: 1px solid black;
padding: 10px;
position: absolute;
top: 20px;
left: 0px;
display: none;
width: 200px;
}
.basket {
position: relative;
}
.basket:hover .drawer {
display: block;
}
Finally, the HTML markup:
<div class="basket">
<a href="#">Basket</a>
<div class="drawer">No items in your basket</div>
</div>
<br/><br/><br/><br/><br/><br/>
<a href="#" class="product">Add X to basket</a>
There seems to be an issue with how these elements interact when tested on Firefox. Any insights on what might be causing this behavior?