Flags Test

by Mike Ward

HTML

<html>

  <head>

  </head>

  <body>

    <div id="parent">
      <img src="https://www.gettysburgflag.com/media/catalog/product/cache/2/thumbnail/520x416/602f0fa2c1f0d1ba5e241f914e856ff9/d/e/denmark.jpg" width="200px">

      <div id="popup" style="display: none">
        <p>
          Denmark <br> pop. = 2 million
        </p>
      </div>
    </div>

    <div id="parent1">
      <img src="https://www.gettysburgflag.com/media/catalog/product/cache/2/thumbnail/520x416/602f0fa2c1f0d1ba5e241f914e856ff9/c/r/croatia.jpg" width="200px">

      <div id="popup1" style="display: none">
        <p>
          Croatia <br> pop. = 3 million
        </p>
      </div>
    </div>


  </body>

</html>

CSS

#parent #popup #parent1 #popup1 {
  display: none;
}

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

p {
  clear: left;
}

img {
  float:
}

JavaScript

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

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