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 code：

<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悬停文档以获取更多详细信息： 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，则会再次将其重新打开。

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

2 个答案: