Question

当我将鼠标悬停在某个图标上时，它应显示网站的iframe实时预览。但是，当我将鼠标悬停在其上时，其他图标会显示在实时预览上方。我想要它，以便当我将鼠标悬停在图标上时，实时预览将显示在其他图标上。

这是我的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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.

Iframe实时预览显示在其他图标上

1 个答案: