css3 resize cursor问题

问题描述

问 题

css3 可以把元素设置成risize，怎样才可以当鼠标放在右下角（阴影小黑块，css自带）的时候，鼠标样式变成cursor：ne-resize？

注意：右下角的黑色小块是使用了resize属性就自动生成的。

解决方案

一种思路而已。

<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 事件判断鼠标位置并修改鼠标样式。

这篇关于css3 resize cursor问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！