onmouseover事件仅在第二次鼠标悬停后才起作用

我正在编写一些代码，当您将鼠标悬停在div以及周围的一些元素上时，这些代码会调整div的大小。它工作得很好，只是当我第一次鼠标悬停在其中一个div上时，它永远不会启动。如果我先在每个div上鼠标一次，从那时起，它就完全符合我的期望。但我不明白为什么它需要两次鼠标悬停

HTML

<div id="comic_009" class="comic" onmouseover="resize('#comic_009', '#comic_008', '#comic_007')"></div>
<div id="comic_008" class="comic" onmouseover="resize('#comic_008', '#comic_009', '#comic_007')"></div>
<div id="comic_007" class="comic" onmouseover="resize('#comic_007', '#comic_008', '#comic_009')"></div>
<br class="clear"><br><br>
<div id="comic_006" class="comic" onmouseover="resize('#comic_006', '#comic_005', '#comic_004')"></div>
<div id="comic_005" class="comic" onmouseover="resize('#comic_005', '#comic_006', '#comic_004')"></div>
<div id="comic_004" class="comic" onmouseover="resize('#comic_004', '#comic_005', '#comic_006')"></div>
<br class="clear"><br><br>
<div id="comic_003" class="comic" onmouseover="resize('#comic_003', '#comic_002', '#comic_001')"></div>
<div id="comic_002" class="comic" onmouseover="resize('#comic_002', '#comic_003', '#comic_001')"></div>
<div id="comic_001" class="comic" onmouseover="resize('#comic_001', '#comic_002', '#comic_003')"></div>

Javascript

function resize(main, resized1, resized2){
            $(main).hover(
                function(){
                    $(main).css('width', '500px');
                    $(main).css('height', '400px');
                    $(main).css('margin-left', '10px');
                    $(resized1).css('width', '205px');
                    $(resized1).css('margin-left', '10px');
                    $(resized2).css('width', '205px');
                    $(resized2).css('margin-left', '10px');
                    $("#footer").css('margin-top', '300px');
                },
                function(){
                    $(main).css('width', '250px');
                    $(main).css('height', '200px');
                    $(main).css('margin-left', '50px');
                    $(resized1).css('width', '250px');
                    $(resized1).css('margin-left', '50px');
                    $(resized2).css('width', '250px');
                    $(resized2).css('margin-left', '50px');
                    $("#footer").css('margin-top', '0px');
                }
            );
        }