jqueryhoverintent

hoverIntent with iframe, messes up with border and height. hover works

I've seen this already: jQuery hoverIntent not working, but hover does

However, I DO have two handlers for in and out, and hoverIntent still doesn't work. Hover does. I'm positive I have all the directories right as well. 

var sidebar = $('#sidebar');

    sidebar.hoverIntent(function(){
        sidebar.attr('id','sidebar_active');
    }, function(){
        sidebar.attr('id','sidebar');
    });

The sidebar is an iframe: 

<iframe id="sidebar" scrolling="no" src="sidebar/sidebar.php"></iframe>

IDs are here:

#sidebar{
    width:56px;
    border:0; 
    height:100%; 
}

#sidebar_active{
    width:150px;
    border:0; 
    height:100%; 
}

Any ideas?

Solution 
  • $(function(){
var sidebar = $('#sidebar');

    sidebar.hoverIntent(function(){
        sidebar.attr('id','sidebar_active');
    }, function(){
        sidebar.attr('id','sidebar');
    });
})

    Here is the working link http://jsfiddle.net/asadalikanwal/usL4a8xj/