Как использовать onmouseover?

129
13

У меня есть список, отображаемый на JSP. При наведении курсора мыши на любое значение мне нужно показать описание, соответствующее этому значению. Необходимо показать описание не как предупреждение, а также не может сделать значения гиперссылкой.
например.
предположим, что значение ABC, так что наведите курсор мыши на AppleBoyCat.
необходимо использовать onmouseover. дайте мне знать, как это сделать.

спросил(а) 2021-01-19T21:19:47+03:00 9 месяцев, 1 неделя назад
1
Решение
91

Что вы хотите сделать? Если вы просто хотите показать всплывающую подсказку, вы можете установить атрибут title для любого элемента, и он будет отображаться как подсказка.


Кроме того, тег abbr также можно использовать в качестве подсказок:

<abbr title="test">stuff</abbr>

ответил(а) 2021-01-19T21:19:47+03:00 9 месяцев, 1 неделя назад
47

Как уже сказал TJHeuvel, вы можете просто использовать атрибут title.


Лучший подход заключается в создании списка с атрибутом value и title из JSP, если это невозможно по какой-либо причине, вы можете построить массив на стороне клиента для каждого значения и его соответствующее описание, а затем используя JavaScript, динамически назначать заголовок на мыши.


Покажите нам еще один код, чтобы получить дополнительную/лучшую помощь.

ответил(а) 2021-01-19T21:19:47+03:00 9 месяцев, 1 неделя назад
46

Возможно, не самое чистое решение, но что-то вроде этого:


<a class='hover' rel='tooltip'>Link</a>

//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>

$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});


И отключение добавит обратный вызов, скрывая его снова. Он просто берет значение от rel ссылки и использует в качестве id для отображения div.


Это быстрое и грязное решение, которое можно сделать более плавным, если вы просто немного поработаете с ним;)
Там также много плагинов, позволяющих тем же самым функциям более чистым способом.


* Edit: просто заметили, что вы добавили комментарий к другому сообщению, в котором вы не можете использовать jQuery.. не следует помечать сообщение тем, что вы не собираетесь использовать.

ответил(а) 2021-01-19T21:19:47+03:00 9 месяцев, 1 неделя назад
47

Вы можете обойти это двумя способами:


1 - скрытый объект dom (например, div), который открывается, когда вы просматриваете все


или


2 - вы можете переписать html конкретного элемента, который вы замаскируете.


Вы можете загрузить эти данные, когда загружаете все остальное (либо как объекты Javascript, либо как разметку, хотя это намного громоздко), или вы можете асинхронно загружать данные описания из службы при наведении курсора мыши (хотя вы будете иметь больше лаг).


jQuery - это быстрый и грязный способ достичь этого (более быстрый, чем грязный), но прямой JS или почти любая другая JS-библиотека также будет работать.

ответил(а) 2021-01-19T21:19:47+03:00 9 месяцев, 1 неделя назад
47

Для простых всплывающих подсказок атрибут title наиболее эффективен, как указано TJHeuvel


Если вам нужны более продвинутые подсказки с форматированием HTML и CSS, я бы предложил вам использовать внешнюю библиотеку.
 Тот, который отлично работает без jQuery ist wz_tooltip скачать здесь, здесь документация

При правильном включении вы можете добавлять всплывающие подсказки, вызывая функции Tip() и UnTip() следующим образом:


<a href="index.htm" onmouseover="Tip('tip text')" onmouseout="UnTip();">Homepage </a>

ответил(а) 2021-01-19T21:19:47+03:00 9 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема