Описание «Onmouseover»
Я играю с событием onmouseover в javascript
Я хотел бы, чтобы всплывающее окно и оставалось до тех пор, пока не будет onmouseover больше
Я думаю, что это называется окном описания, но я не уверен.
Как заставить всплывающее окно с пользовательским текстом при наведении курсора мыши на определенный текст и исчезать, как только я переместите мышь на другой объект ..?
3 ответа
Предполагая, что всплывающее окно является идентификатором вашего «окна описания»:
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;
}
Я бы попробовал сделать это с помощью 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();
});
Ну, я сделал простой двухстрочный скрипт для этого, он маленький и делает то, что вы хотите.
Проверь это http://jsfiddle.net/9RxLM/
Это решение jquery: D