Hover not working with iFrame in IE9

问题:

I'm using CSS3 MegaMenu, that uses jQuery. One of my dropdown menu items uses an iFrame to display a contact form hosted elsewhere.

You can see here: http://www.deepdata.biz (it's the last item on the main nav bar to the right: 'Email')

It works fine, except in IE9, the hover works to drop it down, but once the mouse enters the iFrame area, it disappears, making it impossible for the user to fill out the form.

I've read that this is on purpose for security reasons- but there must be a way around it.

I initially had this problem when my own form without an iFrame and by using CSShover3.htc, it worked fine in IE, so I'm fairly certain it's an iFrame issue.

While searching I have read of a solution using Javascript: http://jsfiddle.net/ENXpW/3/ - but my inexperience with writing Java has hindered me from understanding it enough to adapt it to my needs.

Another solution I searched for was to change the hover styling for the 'Email' link to an onClick command, but again my lack of experience with Javascript is hindering me from grasping just how I would do this.

Any help would be greatly appreciated. CArRiE

回答1:

You can use this small jQuery snippet and a few CSS modifications:

if($.browser.msie){
    $("li.right iframe").hover(function(){ 
        $(this).parents("li.right").trigger("hover");
    });
}

Put it anywhere in your JS file or page, after the element has loaded.

Then, you need to create a duplicate of every .menu li:hover so that it also gets triggered by a .hover class, i.e.

.menu li:hover .align_right {

needs to become:

.menu li:hover .align_right, .menu li.hover .align_right {