javascript - onmouseover 事件仅在第二次鼠标悬停后有效

Question

我正在编写一些代码，当您将鼠标悬停在 div 以及周围的一些元素上时，它会调整 div 的大小。它工作得很好，除了它永远不会在我第一次将鼠标悬停在其中一个 div 上时触发。如果我先将鼠标悬停在每个 div 上一次，从那时起它就会完全按照我的期望进行操作。但我不明白为什么它需要 2 次鼠标悬停。

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');
                }
            );
        }

Answer 1

resize() 仅在第一次调用时设置悬停 Action ；它实际上并不执行该操作。

在用户第一次与页面交互之前，您应该为每张图片设置一次悬停 Action 。您可以通过调用上面的 resize(...) 的每个排列来完成此操作。但是最好使用类而不是 ID 来执行此操作。

参见 this fiddle对于我在类里面谈论的内容。