Question

由于某种原因，我的简单jquery绑定事件无效。有趣的是，如果我在firebug的控制台中运行它两次它可以工作，但它是非常小故障。此外，当我在firebug控制台中运行时，它会说：[文档www.mywebsite.com]

（我在</body>之前将jquery放在底部） 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);
});

<强> Demo

Answer 3

$(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.
    }
});

Answer 4

除了使用javascript之外，您可以使用css执行此操作。如果css可以完成这项工作，那就用css做吧。

的例如 的

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

.bind（）jQuery不适合我

4 个答案: