jquery - 如何在 jQuery 可调整大小的插件中更改鼠标光标？

Question

当您使用 jQuery 可调整大小插件时，鼠标光标样式可以为“e-resize”（2 个相反方向的箭头）。但是，我们怎样才能改变它呢？我试过这个：

$("#right-line").hover(function() {
    $(this).css("cursor", "crosshair");
});

但是，它不起作用，即光标仍然是“e-resize”。

先感谢您。

Answer 1

要覆盖 Jquery 可调整大小的光标，您可以这样做：

$(selector).resizable({
        handles: "e",
        create: function( event, ui ) {
            // Prefers an another cursor with two arrows
            $(".ui-resizable-e").css("cursor","ew-resize");
        }
    });

Answer 2

内联 CSS 可能被 jquery 样式表覆盖。如果您在本地加载它，那么您可以编辑jquery.ui.resizable.css，或者如果您使用更多的 UI 小部件，那么主要jquery-ui.css并编辑cursor属性。

您要编辑的元素.ui-resizable-se是第 202 行jquery-ui.css