Javascript 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>

resize（）；它实际上并没有这样做

在用户第一次与页面交互之前，应该为每个图像设置一次悬停操作。您可以通过调用上面的
resize（…）
的每个排列来实现这一点。但最好使用类而不是ID来实现这一点

有关类的内容，请参见。
resize（）
仅在第一次调用悬停动作时设置悬停动作；它实际上并没有这样做

在用户第一次与页面交互之前，应该为每个图像设置一次悬停操作。您可以通过调用上面的
resize（…）
的每个排列来实现这一点。但最好使用类而不是ID来实现这一点

看看我在课堂上说了些什么。
好吧，我明白了！这是有道理的。而且很容易修复。为什么使用类比使用ID更好？在本例中，我有一行，每行有3个图像。当我将鼠标悬停在一个图像上时，我希望该图像展开，同时收缩该行中的其他两个图像。如果我尝试重用类，我最终会发现元素改变了大小，这是我不想要的。对每个元素使用单独的类而不是ID是否有好处？原因是您可以大大简化代码。例如，有一个
size\u shifting
类，然后是
group\u 1
，
group\u 2
等类。每次用户用
size\u shifting
类在项目上移动鼠标时，都会收缩同一
group\u x
类中的所有其他项目。你可以通过一次调用一个函数来设置它，而不是用很多参数来设置很多调用。我理解你的意思。我肯定会看到它是如何工作的，并且更干净。但我不知道从一个类中收缩一些元素，但从同一个类中放大另一个元素的代码是什么。多亏了你，我很快就解决了鼠标悬停的问题。它现在工作得很好。非常感谢你的帮助！我添加了一个提琴来演示我使用类的意思；您可以极大地简化此代码，而无需对MouseOver进行无数次调用，也无需重复列出所有受影响的ID。非常感谢，您太棒了！我非常理解你在用小提琴做什么，但是里面有一些javascript我以前从未使用过，所以我需要用我的方式来处理这些片段。再次谢谢，我明白了！这是有道理的。而且很容易修复。为什么使用类比使用ID更好？在本例中，我有一行，每行有3个图像。当我将鼠标悬停在一个图像上时，我希望该图像展开，同时收缩该行中的其他两个图像。如果我尝试重用类，我最终会发现元素改变了大小，这是我不想要的。对每个元素使用单独的类而不是ID是否有好处？原因是您可以大大简化代码。例如，有一个
size\u shifting
类，然后是
group\u 1
，
group\u 2
等类。每次用户用
size\u shifting
类在项目上移动鼠标时，都会收缩同一
group\u x
类中的所有其他项目。你可以通过一次调用一个函数来设置它，而不是用很多参数来设置很多调用。我理解你的意思。我肯定会看到它是如何工作的，并且更干净。但我不知道从一个类中收缩一些元素，但从同一个类中放大另一个元素的代码是什么。多亏了你，我很快就解决了鼠标悬停的问题。它现在工作得很好。非常感谢你的帮助！我添加了一个提琴来演示我使用类的意思；您可以极大地简化此代码，而无需对MouseOver进行无数次调用，也无需重复列出所有受影响的ID。非常感谢，您太棒了！我非常理解你在用小提琴做什么，但是里面有一些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');
                }
            );
        }