Переключить курсор на события на кнопке

Question

Я разрабатываю приложение, которое должно иметь нормальную функциональность курсора, но при нажатии кнопки функция курсора переключается на что-то еще, если это имеет смысл.

Например, я хочу иметь функциональность курсора, пока пользователь не нажмет кнопку «Выбрать элемент», после чего курсор начнет выделять элементы, которые пользователь наводит. У меня есть все функции подсветки, но я не уверен, как переключить курсор, чтобы либо начать выделение, либо не выделять.

Еще один пример: у меня бы была регулярная функциональность курсора, пока пользователь не нажмет кнопку «Рисовать», после чего курсор изменится на инструмент выделения или что-то еще и сможет рисовать на странице. Я не спрашиваю, как рисовать на странице, но просто включить курсор для рисования на странице с помощью переключателя.

Answer 1

Вы можете добавить класс с jQuery в родительский контейнер ваших нативных элементов.

Тогда вам просто нужно сделать некоторый CSS для наведения объекта в объекте, у которого новый класс является родительским.

Вот пример базового HTML:

<div class="section"> 
    <div class="object"></div> 
    <div class="object"></div> 
    <div class="object"></div> 
</div> 
<a href='#'>Toggle hover</a> 

И в JQuery:

$('a').click(function(){ 
    $('.section').hasClass('hoverable') ? $('.section').removeClass('hoverable') :   $('.section').addClass('hoverable') 
}) 

Это проверить, если парить активен, если нет, то сделать его активным, иначе удалить класс.

Тогда CSS будет выглядеть следующим образом:

.object{ 
    width: 100px; 
    height : 100px; 
    margin :40px; 
    background-color:blue; 
} 

.hoverable .object:hover{ 
    background-color : yellow; 
    cursor : pointer; 
} 

Я сделал скрипку для вас: http://jsfiddle.net/7jB3W/

Вы можете сделать то же самое для рисования Канева!