Описание Box с использованием "onmouseover"

Я играю с событием onmouseover в javascript

Я бы хотел, чтобы ящик появлялся и оставался до тех пор, пока не осталось onmouseover

Я думаю, что он называется полем описания, но я не уверен.

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

Ответы

Ответ 1

Предполагая, что popup является идентификатором вашего "окна описания":

HTML

<div id="parent"> <!-- This is the main container, to mouse over -->
<div id="popup" style="display: none">description text here</div>
</div>

JavaScript

var e = document.getElementById('parent');
e.onmouseover = function() {
  document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
  document.getElementById('popup').style.display = 'none';
}

В качестве альтернативы вы можете полностью избавиться от JavaScript и сделать это просто с помощью CSS:

CSS

#parent #popup {
  display: none;
}

#parent:hover #popup {
  display: block;
}

Ответ 2

Хотя это не обязательно решение для JavaScript, есть также атрибут глобального тега "title", который может быть полезен.

<a href="/questions/243525/description-box-using-onmouseover" title="This is a mouseover title">Mouseover me</a>

Mouseover me

Ответ 3

Хорошо, я сделал для этого простой двухслойный script, маленький и делает то, что вам нужно.

Проверить это http://jsfiddle.net/9RxLM/

Свойство jquery: D

Ответ 4

Я бы попытался сделать это с помощью jQuery . hover() обработчик событий, он упрощает отображение div с помощью всплывающей подсказки когда мышь над текстом, и скройте его, как только оно исчезло.

Вот простой пример.

HTML:

<p id="testText">Some Text</p>
<div id="tooltip">Tooltip Hint Text</div>

Основной CSS:

#tooltip {
display:none;
border:1px solid #F00;
width:150px;
}

JQuery

$("#testText").hover(
   function(e){
       $("#tooltip").show();
   },
   function(e){
       $("#tooltip").hide();
  });

Ответ 5

Это старый вопрос, но для людей, которые все еще ищут. В JS теперь вы можете использовать свойство title.

button.title = ("Popup text here");

Ответ 6

button.title = ("Popup text here");

Это именно то, что я искал.