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

【问题标题】：jquery change cursor on hover and clickjquery在悬停时更改光标并单击
【发布时间】：2013-11-05 18:29:27
【问题描述】：

我正在使用图像缩放器，并且悬停时需要 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");
});
});

【问题讨论】：

标签： jquery css hover cursor toggle

【解决方案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/

【讨论】：

这很接近，但它正在循环 3 个不同的光标，我只需要 2 个 :-)
哦，如果您只想要 2 个状态，请将悬停事件更改为十字准线，您就完成了！ jsfiddle.net/fCe9B/4
这很好用，但对我不起作用。我相信我需要使用toggle，因此如果我将鼠标悬停在图像上并再次打开，它会记住光标所处的状态。单击放大/缩小图像，并且在鼠标移出时图像保持在其所在的缩放状态。因此，如果：（悬停>单击>鼠标悬停>悬停）光标状态将是错误的。如果鼠标移出时不会重置，此代码将起作用。
您实际上拥有单击的变量上的光标状态。在更改悬停事件上的光标之前询问将保留图像的旧状态。像这样。 jsfiddle.net/fCe9B/5
这行得通！但是，如果多次出现<div>，它将使用最后一个<div> 的鼠标状态。我可以使用document.getElementById("#Id") 将类添加到每个 div 吗？我在这里稍微修改了 JS/html/css，但我认为它会起作用。 jsfiddle.net/fCe9B/6

【解决方案2】：

您可以使用的光标可以是十字准线，也可以使用自定义图像，在这种情况下您可以使用加号：)

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

}

那你就直接说

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

【讨论】：