Question

当谈到Jquery时，请原谅我，但我有一些jquery代码可以为我做翻转：

$("img.rollover").hover(function () {
    this.src = this.src.replace("_off","_on");
  }, 
  function () {
    this.src = this.src.replace("_on","_off");
});

基本上只是将图像从image_on.jpg切换到image_off.jpg，悬停在一堆图像上，现在点击我想永久设置“image_on”的状态，但悬停状态似乎覆盖它并且它没有“停留”_on“，我猜它与事件的绑定有什么关系？我似乎也无法这样做，所以如果用户点击一个图像将其设置为打开，但是如果他们点击另一个图像将前一个图像返回到“_off”状态并将当前图像设置为“_on”州。

任何帮助表示赞赏，ta。

Answer 1

我会在链接实际处于活动状态时为链接添加“选定”类，并对其进行过滤。

$("img.rollover").bind('click',function(){
    $('img.rollover').removeClass('selected');
    $(this).addClass('selected');
}).hover(function () {
    this.src = this.src.replace("_off","_on");
  }, 
  function () {
if(!$(this).hasClass('selected')){
    this.src = this.src.replace("_on","_off");
}
});

当然，您可以使用_on图像设置.selected图像的样式。

<强>旁注：请注意，实现翻转图像的推荐方法是css sprite技术：使用包含所有状态的图像，将该图像用作背景图像，并根据以下内容调整背景位置：hover，：active states。这是一个纯CSS解决方案，适用于所有最近的浏览器。

Answer 2

你的悬停代码似乎一个接一个地运行两个函数，这将有效地撤消彼此的更改。所以_off转向_on然后再回来。

因此，要将鼠标悬停切换为“on”，您只需要

$（“img.rollover”）。hover（function（）{

this.src = this.src.replace("_off","_on");

}）;

如果您只是执行此功能，则每次可以控制其他状态，例如

$（“img.rollover”）。mouseout（function（）{

this.src = this.src.replace("_on","_off");

}）;

Answer 3

您可以在发生点击时取消绑定悬停事件$(this).unbind('mouseenter mouseleave')，并在以后需要时重新绑定。

Jquery Rollovers，点击状态问题

3 个答案: