HTML:
<div id="container"><div class="section one"></div><div class="inner"></div><div class="section two"></div><div class="inner"></div><div class="section three"></div><div class="inner"></div><div class="section four"></div><div class="inner"></div></div>Explanation:
On hover each div ( section ) it should hide and the next div( inner ) should display. On mouseleave it show as old.For this I use moseenter and mouseleave events.
Problem
On mouseenter the div blinks (happends the both events together).
Jquery
$(document).ready(function () { $(".inner").hide(); $(".section").mouseenter(function () { $(this).hide(); $(this).next(".inner").show(); }); $(".section").mouseleave(function () { $(this).show(); $(this).next(".inner").hide(); });});Please check the fiddle given below for more details
