jquery 在悬停时更改光标并单击

Question

我正在使用图像缩放器，悬停时需要 2 种不同的鼠标状态。

#1 悬停在包含 <div> 上光标变为“加号”符号。
#2 当用户单击时，光标变为“减号”符号。 (现在放大)
#loop 再次单击后，光标会返回到加号(默认悬停 View )

我无法使用 mousedown/up 或 :active因为我需要它一直停留直到再次点击，
所以我想使用 toggle是我最好的选择。

到目前为止，我得到了这个 http://jsfiddle.net/fCe9B/但效果不太好。
根据放置默认悬停图像调用的位置，toggle不会替换 hover反之亦然。
只要我能让两个光标状态都出现就可以了。
谁能帮我解决这个问题？

CSS

.cursor {cursor:move;}
#box {height:300px;width:300px;background:blue;}
#box:hover {cursor:help;}

Jquery

$(document).ready(function(){
$("#box").click(function(){
$("#box").toggleClass("cursor");
});
});

Answer 1

你可以做这样的事情，检查图像是否有改变光标的特定 css 类。

   $(document).ready(function(){

      $(".box").hover(function(){
        if($(this).hasClass("zoomed")){
          $(this).removeClass("zoomed");
        }else{
          $(this).addClass("zoomed");
      } 
    });
  $(".box").click(function(){
      if($(this).hasClass("zoomed")){
        $(this).removeClass("zoomed");
      }else{
          $(this).addClass("zoomed");

      }
  });
});

CSS

.box {
    height:300px;
    width:300px;
    background:blue;
    cursor:w-resize;
}


.zoomed{
    cursor:crosshair;
}

HTML

<div class="box"></div>

这是 jsfiddle，您可以尝试一下。 http://jsfiddle.net/fCe9B/9/