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

Question

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?

Answer 1

$(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/