Pole s popisem pomocí „onmouseover“

Hraji s onmouseover událost v javascriptu

Chtěl bych, aby se objevila malá krabička a zůstala otevřená, dokud nebude onmouseover

Myslím, že se tomu říká popisné pole, ale nejsem si jistý.

Jak získám malý rámeček, který se zobrazí s vlastním textem, když umístím kurzor myši na určitý text, a zmizí, jakmile přejdu myší na jiný objekt?

Odpověď

Za předpokladu popup je ID vašeho „description box“:

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';
}

Případně se můžete zcela zbavit JavaScriptu a provést to pouze pomocí CSS:

CSS

#parent #popup {
  display: none;
}

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