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

我正在设置一个图像，单击时放大，单击几秒钟后缩小，单击图像时我需要更改光标:放大和光标:缩小。有什么办法可以做到这一点。`

  * { 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; }

最佳答案

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

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

在图像上使用光标时保持相同模式:悬停

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

关于jquery - 单击图像时如何更改缩放图标？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55321556/