CSS-курсоры.Каков современный и прогрессивный способ?

Question

При перемещении по перетаскиваемому элементу я хочу, чтобы курсор изменился на руку, а при нажатии мыши до тех пор, пока не будет поднята мышь, я хочу поменять руку на «захват». Как правильно, кросс-браузер совместимый способ сделать это?

Поиск в Google приводит только к веб-сайтам с двухтысячного года с учебными пособиями по IE6. BLA!

Есть ли какие-нибудь хорошие СОВРЕМЕННЫЕ учебники по этой теме? Если нет, то кто-то должен написать один. Это было бы отличной журнальной статьей!

Answer 1

Используя инфраструктуру 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/ Дайте мне знать, если вам нужна дополнительная информация.Надеюсь, это поможет.

Answer 2

Пропорциональный способ - использовать cursor значения по умолчанию для правила, как 'move' в вашем случае.

Если вы хотите использовать собственный курсор, вы должны иметь файл .cur для IE и png / gifфайл для других, так что вы можете написать

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

Answer 3

Использование CSS:

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

.myElement { 
    cursor: move;
}

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