3

イメージ ズーマーを使用しており、ホバー時に 2 つの異なるマウス状態が必要です。

#1カーソルを含む<div>にカーソルを合わせると、「プラス」記号になります。
#2ユーザーがクリックすると、カーソルが「マイナス」記号に変わります。(ズームイン)
#loopもう一度クリックすると、カーソルはプラス記号に戻ります (デフォルトのホバービュー)

マウスダウン/アップを使用できないか:active、もう一度クリックするまでそのままにしておく必要があるため、使用するのが最善の策
だと思います。toggle

これまでのところ、私はこのhttp://jsfiddle.net/fCe9B/を持っていますが、うまくいきません。
デフォルトの hover image-call が配置されている場所に応じて、toggleが を置き換えないか、hoverまたはその逆になります。
両方のカーソル状態を表示できる限り、うまくいくはずです。
誰でもこれを解決するのを手伝ってもらえますか?

CSS 

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

Jクエリ 

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

2 に答える 2

2

画像にカーソルを変更する特定の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/

于 2013-11-05T18:42:46.833 に答える
0

使用できるカーソルは十字線のカーソルにするか、この場合はプラス記号のカスタム画像を使用できます:)

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

}

それからあなたはただ言うことができます

on click .cursor { 
cursor : url(image/cursor.jpeg);
}
于 2013-11-05T18:40:33.710 に答える