Timothy Wong Timothy Wong - 4 months ago 10
HTML Question

Iframe live preview to show over other icons

When I hover over an icon, it is supposed to show an iframe live preview of a website. However, when I hover over, the other icons are shown over the live preview. I want it so that when I hover over an icon, the live preview is shown over the other icons.

Here is my code:



#map {
position: relative;
width: 1250px
}
#Mexico {
position: relative;
bottom: 365px;
left: 125px;
z-index: 1;
}
#Brazil {
position: relative;
bottom: 415px;
left: 360px;
z-index: 1;
}
#Guatemala {
position: relative;
bottom: 360px;
left: 150px;
z-index: 1;
}
#Elsalvador {
position: relative;
bottom: 370px;
left: 165px;
z-index: 1;
}
#Honduras {
position: relative;
bottom: 412px;
left: 180px;
z-index: 1;
}
#Nicaragua {
position: relative;
bottom: 412px;
left: 190px;
z-index: 1;
}
#Haiti {
position: relative;
bottom: 475px;
left: 230px;
z-index: 1;
}
#DR {
position: relative;
bottom: 497px;
left: 250px;
z-index: 1;
}
#Ecuador {
position: relative;
bottom: 460px;
left: 205px;
z-index: 1;
}
#Bolivia {
position: relative;
bottom: 425px;
left: 260px;
z-index: 1;
}
#BFaso {
position: relative;
bottom: 570px;
left: 525px;
z-index: 1;
}
#Ghana {
position: relative;
bottom: 565px;
left: 525px;
z-index: 1;
}
#Togo {
position: relative;
bottom: 590px;
left: 550px;
z-index: 1;
}
#Ethiopia {
position: relative;
bottom: 635px;
left: 705px;
z-index: 1;
}
#Uganda {
position: relative;
bottom: 610px;
left: 670px;
z-index: 1;
}
#Kenya {
position: relative;
bottom: 625px;
left: 698px;
z-index: 1;
}
#Rwanda {
position: relative;
bottom: 630px;
left: 655px;
z-index: 1;
}
#Tanzania {
position: relative;
bottom: 642px;
left: 690px;
z-index: 1;
}
#India {
position: relative;
bottom: 825px;
left: 850px;
z-index: 1;
}
#Slanka {
position: relative;
bottom: 740px;
left: 877px;
z-index: 1;
}
#Bangladesh {
position: relative;
bottom: 840px;
left: 907px;
z-index: 1;
}
#Eindia {
position: relative;
bottom: 870px;
left: 930px;
z-index: 1;
}
#Thailand {
position: relative;
bottom: 850px;
left: 970px;
z-index: 1;
}
#Indonesia {
position: relative;
bottom: 790px;
left: 1015px;
z-index: 1;
}
#Philippines {
position: relative;
bottom: 870px;
left: 1055px;
z-index: 1;
}
#Eindonesia {
position: relative;
bottom: 820px;
left: 1120px;
z-index: 1;
}
#Columbia {
position: relative;
bottom: 460px;
left: 225px;
z-index: 1;
}
#Peru {
position: relative;
bottom: 815px;
left: 220px;
z-index: 1;
}
.box {
display: none;
width: 100%;
z-index: 100;
}
a:hover + .box,
.box:hover {
display: block;
position: absolute;
}

<div id="map">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/ci-world-map.png" alt="CI World Map">

</div>

<div id="Mexico">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>
<div class="box">
<iframe src="http://www.washington.edu/" width="450px" height="450px" scrolling="no"></iframe>
</div>

</div>

<div id="Guatemala">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Elsalvador">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Honduras">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Nicaragua">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Haiti">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="DR">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Columbia">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>



<div id="Brazil">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Ecuador">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Bolivia">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>


<div id="BFaso">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>


<div id="Ghana">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Togo">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Ethiopia">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Uganda">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Kenya">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>


<div id="Rwanda">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>


<div id="Tanzania">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="India">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Slanka">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Bangladesh">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Eindia">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Thailand">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Indonesia">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Philippines">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Eindonesia">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>

<div id="Peru">
<a href="http://www.google.com" target="_blank">
<img src="http://mcr.compassion.com/leppienfamily/wp-content/uploads/sites/6/2016/07/skippy-dot.png" alt="Skippy Dot" height="22">
</a>

</div>




Answer

I made a plunker here. Your iframes are child elements of the divs with z-index of 1. You just need to add a class that will set the parent tag z-index to 100 when it is being hovered over. I added the class .country { z-index:100 !important; } and then added it onto each of the country divs. Child elements can't have a z-index higher than their parent element.