CODE
$("#layer2_cell1").mouseenter(function() {
$("#storage").data('airplanessubcell', '1');
alert("test");
});
$("#layer2_cell1").mouseleave(function() {
$("#storage").data('airplanessubcell', '0');
});
$("#layer1_cell1").mouseenter(function() {
$("#layer1_cell1").css('background', 'url(images/box_background1.jpg)');
$("#path").html('<font color="#01DFD7" size="5"><b>→Airplanes→</b></font>');
$('#layer1_cell1').css( 'cursor', 'pointer' );
$('#layer2_cell1').show();
});
$("#layer1_cell1").mouseleave(function() {
$("#layer1_cell1").css('background', 'url(images/box_background.jpg)');
$("#path").html('<font color="#01DFD7" size="5"><b>→</b></font>');
$('#layer1_cell1').css( 'cursor', 'default' );
var subcell = $("#storage").data('airplanessubcell');
alert(subcell);
if (!(subcell == '1')) {
$('#layer2_cell1').hide();
}
});
The point is to delete the subcell when the mouse is not over the subcell or the maincell. It seems like it would work but for some reason the mouseenter for the subcell is not defining the $("#storage").data('airplanessubcell'); varaible and thus it is undefined. hower the mouse leave still defines the variable as 0 and the mouse enter still alerts. What the hell?