jquery - 在 css 文件中取消绑定选择器，然后再次绑定选择器

Question

我有一个 div，他在 .css 文件中有这个选择器：

#item {background-image: url(Images/panda.png);
}
#item:hover { background-image: url(Images/pandaOf.png);
}
#item:active { background-image: url(Images/pandaOn.png);
}

我需要（在 jQuery 中）这个选择器（:hover 和 :active）不起作用。

$("#clickItem").click(function (){
...
 });

在我需要这个选择器再次工作之后。

$("#clickItem2").click(function (){
...
 });

HTML 代码：

<div id = "item"> </div>
<div id = "clickItem"> </div>
<div id = "clickItem2"> </div>

Answer 1

jQuery 有一个特定的悬停方法，可能对您有用。

这是一个例子：

$("#clickItem").hover(function (){
      Code for OnHover goes here
 },
function (){
      Code for OffHover goes here
 }
});

查看 jQuery hover 文档了解更多详细信息： http: //api.jquery.com/hover/

Answer 2

我想这就是你的意思...

CSS

.item-active {
    background-image: url(Images/panda.png);
}
.item-active:hover {
    background-image: url(Images/pandaOf.png);
}
.item-active:active {
    background-image: url(Images/pandaOn.png);
}

HTML

<div id="item" class="item-active"></div>
<div id="clickItem">clickItem</div>
<div id="clickItem2">clickItem2</div>

Javascript

$("#clickItem").click(function (){
    $("#item").removeClass("item-active");
});

$("#clickItem2").click(function (){
    $("#item").addClass("item-active");
});

默认情况下，您具有 的悬停和活动状态#item。如果单击#clickItem，则会将其删除。如果您单击#clickItem2，它会再次将它们重新打开。