Iframe live preview для отображения над другими значками

Когда я наводил курсор мыши на значок, он должен показывать предварительный просмотр веб-сайта iframe. Однако, когда я наводил верх, другие значки отображаются в режиме предварительного просмотра. Я хочу, чтобы, когда я наводил курсор на значок, предварительный просмотр в реальном времени отображается поверх других значков.Iframe live preview для отображения над другими значками

Вот мой код:

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

источник

2016-07-11 Timothy Wong

Улучшено форматирование кода, добавлено live preview – Kld

Я сделал plunker here. Ваши iframe являются дочерними элементами divs с z-индексом 1. Вам просто нужно добавить класс, который установит родительский тег z-index на 100, когда он зависнет. Я добавил класс .country { z-index:100 !important; }, а затем добавил его на каждый из разделов страны. Элементы дочерних элементов не могут иметь индекс z выше своего родительского элемента.

источник

2016-07-11 19:03:37

Спасибо! Он отлично работает !!! –

Я заметил, что когда я нависаю над значками, иногда это очень лаконично. Есть ли способ сделать не отставание? –

Это относится к iframes, загружающим веб-страницы внутри них. Вы можете попробовать что-то вроде: http://stackoverflow.com/questions/4891029/preload-iframe –

Iframe live preview для отображения над другими значками

ответ

Смежные вопросы