CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SometimesDirty
SometimesDirty

Reputation: 25

onmouseover event only works after second mouse over

I am writing some code that resizes a div when you hover over it, as well as some surrounding elements. It works perfectly, except that it will never fire the first time I mouse over one of the divs. If I mouse over each div one time first, from that point on it does exactly what I was hoping for. But I can't figure out why it needs 2 mouse overs.

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

Upvotes: 1

Views: 1344

Answers (1)

elixenide
elixenide

Reputation: 44841

resize() only sets the hover action the first time it is called; it doesn't actually do that action.

You should set the hover action for each of your images once before the first time the user interacts with the page. You could do this by calling each of the permutations of resize(...) above. But it would be better to do this using classes, rather than ids.

See this fiddle for what I'm talking about with classes.

Upvotes: 1

Related Questions