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

Question

我正在设置一个图像，单击该图像时将其放大，而单击秒数则将其放大，而单击该图像时，我需要更改光标：放大和cursor：zoom-out。有什么方法可以做到这一点。

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