.bind () jQuery не работает для меня

Question

По какой-то причине мое простое событие jquery bind не работает. Самое смешное, что если я запускаю его дважды в консоли firebug, это работает, но это очень глючно. Кроме того, когда я запускаю его в консоли firebug, он говорит следующее: [Document www.mywebsite.com]

(я поместил jquery внизу до </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

Просто используйте hover:

$("div.step_highlighter").hover(function() {
  $(this).toggleClass("step_highllighted"); 
});

Кроме того, если вы используете jQuery 1.7 и выше, .bind() был заменен на .on().

Answer 2

Вместо использования mouseover используйте mouseenter, потому что при использовании mouseover при перемещении мыши по любым внутренним элементам срабатывает mouseout, а затем вы видите эффект мерцания. mouseenter снимает эту проблему, поэтому всегда используйте комбинацию mouseenter и mouseleave.

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

Демо

Answer 3

Помимо использования javascript, вы можете просто сделать это с помощью css.Если css может закончить работу, просто сделайте это с помощью css.

Например:

.step_highlighter:hover {
   background-color: red;
}

Answer 4

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

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

Первая функция ничего не делает, вы должны заставить ее выполнить себя ....:

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

А кроме того, должно быть просто:

$("div.step_highlighter").on("mouseover mouseleave", function(event){
    if(event.type ==="mouseover"){
      $("div.step_highlighter").toggleClass("step_highlighted"); 
    }else{
      $("div.step_highlighter").toggleClass("step_highlighted"); 
      //or what ever else.
    }
});