Наведение курсора мыши

В вычислительной технике наведение курсора мыши , наведение мыши или поле наведения — это графический элемент управления , который активируется, когда пользователь перемещает или наводит указатель на область триггера, обычно с помощью мыши , но также возможно и с помощью цифрового пера . Элементы управления наведением мыши часто встречаются в веб-браузерах . Например, при наведении курсора на гиперссылку элемент управления наведением мыши активирует отображение URL-адреса в строке состояния . Дизайнеры сайтов могут определять свои собственные события наведения курсора мыши с помощью JavaScript. или Каскадные таблицы стилей .

наведения мыши События часто используются в веб-дизайне и программировании графического пользовательского интерфейса .

Он также известен как ролловер и относится к кнопке, созданной веб-разработчиком или веб-дизайнером, находящейся на веб-странице и используемой для обеспечения интерактивности между пользователем и самой страницей. Термин «ролловер» в этом отношении происходит от визуального процесса «наведения курсора мыши на кнопку», вызывающего реакцию кнопки (обычно визуально, путем замены исходного изображения кнопки другим изображением), что иногда приводит к изменению веб-страницы. сама страница. Часть термина «кат», вероятно, относится к старым мышам, у которых был механический узел, состоящий из шарика из твердой резины, помещенного в основание мыши (который катится), в отличие от современной оптической мыши, у которой нет вращающихся частей.

Ролловер можно выполнять с помощью изображений, текста или кнопок. Для выполнения этого интерактивного действия пользователю требуется всего два изображения/кнопки (с возможным добавлением к этим изображениям «замещающего» текста). Изображения ролловера можно выполнить либо с помощью программы со встроенным инструментом, либо с помощью скрипта. Пользователю придется выбрать первое изображение и выбрать альтернативное вторичное изображение. Для срабатывания ролловера необходимо установить действие мыши: «нажать» или «навести указатель мыши». Когда наведение курсора мыши перемещается по изображению, альтернативное/дополнительное изображение появляется, но не остается – когда пользователь «убирает указатель мыши», отводя указатель мыши от изображения, исходное исходное изображение появляется снова.

Подсказка

Основная статья: Подсказка

Особым применением события наведения мыши является всплывающая подсказка , которая показывает краткое описание объекта под указателем. Всплывающая подсказка появляется только после того, как мышь или перо удерживаются над объектом в течение определенного времени.

На изображениях они могут быть созданы с использованием HTML title атрибут.

Примеры

<!-- Direct usage is not recommended. It does not conform with web standards. -->
<img id="myImage" src="/images/myImage.jpg" onMouseOver="alert('your message');">

// JavaScript code without any framework
<ref>var myImg = document.getElementById('myImage');</ref>
function myMessage() {
    alert('your message');
}

if (myImg.addEventListener) { //addEventListener is the standard method to add events to objects.
    myImg.addEventListener('mouseover', myMessage, false);
}

else if (myImg.attachEvent) { //For Internet Explorer
    myImg.attachEvent('onmouseover', myMessage);
}

else { //For other browsers
    myImg.onmouseover = myMessage;
}

// jQuery example. It degrades well if JavaScript is disabled in the client browser.
$("img").mouseover(function(){
   alert('your message');
});

Внешние ссылки

• Скрытое меню CSS Многоуровневое меню при наведении курсора мыши на чистом CSS (т. е. без JavaScript).