当前位置：文江博客话题详情

CSS 光标。什么是现代且正确的方式？

发布于 2024-10-03 13:18:55 字数 172 浏览 2 评论 0原文

当在可拖动元素上移动时，我希望光标更改为手，当鼠标按下直到鼠标向上时，我想更改为“抓取”手。正确的、跨浏览器兼容的方法是什么？

谷歌搜索只能找到 2000 年前的网站，其中包含有关 IE6 的教程。巴拉！

有关于这个主题的任何好的现代教程吗？如果没有，就需要有人写一个。这将成为一篇精彩的杂志文章！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤蝉 2024-10-10 13:18:56

正确的方法是使用 cursor 规则默认值，如您的情况下的“移动”。

如果你想要一个自定义光标，你必须有一个适用于 IE 的 .cur 文件和适用于其他浏览器的 png/gif 文件，这样你就可以编写

cursor:url(notie.png),url(ie.cur),move;

The propper way is to use cursor rule default values, as 'move' in your case.

If you want a custom cursor you must have a .cur file for IE and a png/gif file for others, so you can write

cursor:url(notie.png),url(ie.cur),move;

回复收藏 0 原文

子栖 2024-10-10 13:18:56

使用 CSS：

http://www.w3schools.com/css/pr_class_cursor.asp

.myElement { 
    cursor: move;
}

.myCustomCursor {
    cursor: url(myCoolCursor.gif);
}

Using CSS:

http://www.w3schools.com/css/pr_class_cursor.asp

.myElement { 
    cursor: move;
}

.myCustomCursor {
    cursor: url(myCoolCursor.gif);
}

回复收藏 0 原文

蓝海似她心 2024-10-10 13:18:55

使用 jQuery 框架，您可以执行如下操作：

// define a hover event so that when you hover over and out of the dragable element
// the cursor changes accordingly
$('#element').hover(function(){
    $(this).css('cursor','move');
} , function(){
    $(this).css('cursor','default');
});

// this cursor property is only supported in mozilla, but here you can insert
// an image as other posters have specified
// this event changes the cursor when you click the dragable element
$('#element').mousedown(function(){
    $(this).css('cursor','-moz-grabbing');
});

// this event changes the cursor back to the default type after you let go 
// of the dragable element
$('#element').mouseup(function() {
    $(this).css('cursor','default');
});

有关实例，请查看： http://jsfiddle.net /EaEe3/ 如果您需要更多信息，请告诉我。我希望这有帮助。

Using the jQuery framework, you could do something like this:

// define a hover event so that when you hover over and out of the dragable element
// the cursor changes accordingly
$('#element').hover(function(){
    $(this).css('cursor','move');
} , function(){
    $(this).css('cursor','default');
});

// this cursor property is only supported in mozilla, but here you can insert
// an image as other posters have specified
// this event changes the cursor when you click the dragable element
$('#element').mousedown(function(){
    $(this).css('cursor','-moz-grabbing');
});

// this event changes the cursor back to the default type after you let go 
// of the dragable element
$('#element').mouseup(function() {
    $(this).css('cursor','default');
});

For a live example, check this out: http://jsfiddle.net/EaEe3/ Let me know if you need more information. I hope this helps.

回复收藏 0 原文

~没有更多了~