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()只有在第一次调用时设置悬停操作;它实际上并没有做那个动作。

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

请参阅this fiddle了解我正在与课程讨论的内容。

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

1 个答案: