jquery - 单击图像时如何更改缩放图标？

Question

我正在设置一个图像，点击它时它是放大的，点击它是缩小的，而点击图像我需要改变光标:放大和光标:缩小。有什么办法可以做到这一点。`

  * { border:0; margin:0; padding:0; }
    p { position:absolute; top:3px; right:28px; color:#555; font:bold 
     13px/1 sans-serif;}

    /* these styles are for the demo, but are not required for the plugin */
    .zoom {
        display:inline-block;
        position: relative;
    }

    /* magnifying glass icon */
    .zoom:after {
        content:'';
        display:block; 
        width:33px; 
        height:33px; 
        position:absolute; 
        top:0;
        right:0;
        cursor:zoom-in;
    }

    .zoom img {
        display: block;
      cursor: -webkit-zoom-in;
        cursor: -moz-zoom-in;
    }

    .zoom-overlay-open, .zoom-overlay-transitioning {
    cursor: default;
    }
    .zoom img::selection { background-color: transparent; }

    #ex2 img:hover { cursor: url(grab.cur), default; }

Answer 1

要在单击时更改光标，您可以使用伪类 :active

.zoom:active {
    cursor: zoom-in;
}

当光标在图像上时使用 :hover 使其保持相同的模式

.zoom:hover {
    cursor: zoom-in;
}