Question

For some reason my simple jquery bind event isn’t working. The funny thing is that if I run it in the console of firebug twice it works, but it’s very glitchy. Also, when I run it in the firebug console it says this: [Document http://www.mywebsite.com]

(I placed jquery at bottom before </body>)
jquery:

<script type="text/javascript"> //steps highlighter
$(function() {
    $("div.step_highlighter").bind("mouseover mouseleave", highlight);
});

function highlight(evt) {
    $("div.step_highlighter").toggleClass("step_highlighted");  
}

html:

<div class="step_highlighter">
            <div class="step_wrap">
                    <h2 class="step_title"> Step 1: </h2>
                    <p class="step"> Determine which service we can help you with. </p>
                    <p class="sub_step">Web Design</p>
                    <p class="sub_step">Web Development</p>
                    <p class="sub_step">Graphic Design</p>
                    <p class="sub_step">Internet Marketing</p>
            </div>
        </div>

Answer 1

Instead of using mouseover use mouseenter because when you use mouseover, moving the mouse on any internal elements trigger mouseout and then you see flickering effect. mouseenter takes of this issue so always use mouseenter and mouseleave combination.

$(function() {
    $("div.step_highlighter").bind("mouseenter mouseleave", highlight);
});

Demo