0

我正在尝试构建一个半透明的菜单(和其他东西),代码如下所示:

    $(".hover-opaque").on({
        load: function () {
            $(this).addClass("opacity02");
        },
        mouseenter: function() {
            $(this).removeClass("opacity02");
            $(this).addClass("opacity1");
        },
        mouseleave: function() {
            $(this).removeClass("opacity1");
            $(this).addClass("opacity02");
        }
    });

当它被加载(或“准备好”)时,addClass(“opacity02”)使其半透明,当鼠标进入时,通过addClass(“opacity1”)使其不透明,当鼠标离开时,再次做相反的一面.

到目前为止,mouseenter 和 mouseleave 运行良好,但“load”(或“ready”)不起作用。我当然可以这样做:

    $(".hover-opaque").addClass("opacity02");

但我听说它无法处理 Ajax 生成的内容。

所以有什么问题?

顺便说一句,我尝试将上述代码放入 document.ready() 而不是,但两者都不起作用。

我检查了很多 jquery.on() 示例,但所有这些示例都是关于处理“单击”“mouseenter”或其他事件的。

感谢您的帮助。

4

1 回答 1

1

As @adeneo said, "ready" event works only for document. And any manipulation of DOM should be done after document is ready. So all your code should reside inside $(document).ready (unless your JavaScript is inline after the HTML, which is a bad practice).

Then you can add your class to your .hover-opaque element. No need for individual "ready" event for it.

For example:

$(function() { // shorthand for $(document).ready
  $(".hover-opaque").addClass("opacity02").on({
    //...your events...
  });
});
于 2013-07-31T17:36:46.310 回答