Question

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

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

但是，它不起作用，即光标仍然是“电子调整大小”。

提前谢谢。

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，它是jquery-ui.css

的第202行

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

2 个答案: