Question

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

＃1 悬停包含<div>时，光标变为“加号”符号。
＃2 当用户点击光标时，会更改为“减号”符号。（现在放大）
#loop 再次点击后，光标会返回加号（默认悬停视图）

我无法使用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/

Answer 2

您可以使用的光标可以是十字准线，也可以使用自带的自定义图像加号：）

.cursor {
cursor : url(image/cursor.jpeg);
cursor : crosshair;

}

然后你可以说

on click .cursor { 
cursor : url(image/cursor.jpeg);
}

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

2 个答案: