.hover and .click issue in IE.
Hi guys and girls.
To start with please excuse my noob status and I will apologise in advance that my code is probably written in the longest way possible.
I'm having an irritating issue with IE (not surprisingly) that I just cannot seem to fix.
Basically, I have a div that when hovered over shows pop out menu to the right.
After that div is clicked it disappears and allows the div underneath to animate and expand to show content. This all works absolutely fine in FF and Safari, but as soon as I tried it in IE it seemed as though the z-index of the divs was screwed. I could tell because when I hovered on the edge of the icon the hover effect worked.
After a lot of searching I found that if I used the .bgiframe plugin it sort of fixes the hover bug, but then makes it so that it can't be clicked.
Some of the code is as follows:
$("#hover").bgiframe();
$("#hover").hover(
function() {
$("#dropdown").animate({height:50}, "slow", "easeOutBounce");
$("#dropdown").animate({width:55}, "slow", "easeOutBounce");
},
function() {
$("#dropdown").animate({height:50}, "slow", "easeOutBounce");
$("#dropdown").animate({width:0}, "slow", "easeOutBounce");
});
$("#hover").click(
function() {
$('#hover').hide('fast');
$('#one').animate({marginTop:55}, "slow");
$('#one').animate({height:380}, "slow", "easeOutBounce");
$('#one').animate({width:1000}, "slow", "easeOutBounce");
});
I think that's all the code you'd need to see however if you want to see the bug click here.
If I've missed anything or whatever just say and cheers for any help you can give.