css3 resize cursor问题

Question

css3 可以把元素设置成risize，怎样才可以当鼠标放在右下角（阴影小黑块，css自带）的时候，鼠标样式变成cursor：ne-resize？注意：右下角的黑色小块是使用了resize属性就自动生成的。

Answer 1

一种思路而已。

<textarea></textarea>

<script>

    $(document).on('mousemove', 'textarea', function (e) {

        let el = $(this),

            top = el.offset().top + el.outerHeight() - 16,

            left = el.offset().left + el.outerWidth() - 16;

        el.css({

            cursor: e.pageY > top && e.pageX > left ? 'ne-resize' : ''

        });

    });

</script>

主要是利用 onmousemove 事件判断鼠标位置并修改鼠标样式。