I need help with a hover effect for 6 divs on a page. Each div has a layer on top that fades out on hover and fades back in on mouseleave. I currently have code for each individual div layer, but it's causing a stack overrun. How can I assign this functionality to all six top layers in just one block of code? Any guidance would be appreciated! Check out the JSFiddle here
<script>
$(function(){
$(".hover6").mouseenter(function() {
$(this).siblings().fadeIn();
$(this).fadeOut();
});
$("#div6").mouseleave(function() {
$(".hover6").fadeIn('slow');
});
$(this).siblings().fadeOut();
})
</script>
<script>
$(function(){
$(".hover5").mouseenter(function() {
$(this).siblings().fadeIn();
$(this).fadeOut();
});
$("#div5").mouseleave(function() {
$(".hover5").fadeIn('slow');
});
$(this).siblings().fadeOut();
})
</script>
//and so on - identical script for other 4 divs