Html Iframe live预览以显示在其他图标上

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

这是我的密码：

#地图{
位置：相对位置；
宽度：1250px
}
#墨西哥{
位置：相对位置；
底部：365px；
左：125px；
z指数：1；
}
#巴西{
位置：相对位置；
底部：415px；
左：360px；
z指数：1；
}
#危地马拉{
位置：相对位置；
底部：360px；
左：150px；
z指数：1；
}
#埃尔萨尔瓦多{
位置：相对位置；
底部：370px；
左：165px；
z指数：1；
}
#洪都拉斯{
位置：相对位置；
底部：412px；
左：180像素；
z指数：1；
}
#尼加拉瓜{
位置：相对位置；
底部：412px；
左：190px；
z指数：1；
}
#海地{
位置：相对位置；
底部：475px；
左：230像素；
z指数：1；
}
#博士{
位置：相对位置；
底部：497px；
左：250px；
z指数：1；
}
#厄瓜多尔{
位置：相对位置；
底部：460px；
左：205px；
z指数：1；
}
#玻利维亚{
位置：相对位置；
底部：425px；
左：260px；
z指数：1；
}
#博法索{
位置：相对位置；
底部：570px；
左：525px；
z指数：1；
}
#加纳{
位置：相对位置；
底部：565px；
左：525px；
z指数：1；
}
#多哥{
位置：相对位置；
底部：590px；
左：550px；
z指数：1；
}
#埃塞俄比亚{
位置：相对位置；
底部：635px；
左：705px；
z指数：1；
}
#乌干达{
位置：相对位置；
底部：610px；
左：670px；
z指数：1；
}
#肯尼亚{
位置：相对位置；
底部：625px；
左：698px；
z指数：1；
}
#卢旺达{
位置：相对位置；
底部：630px；
左：655px；
z指数：1；
}
#坦桑尼亚{
位置：相对位置；
底部：642px；
左：690px；
z指数：1；
}
#印度{
位置：相对位置；
底部：825px；
左：850像素；
z指数：1；
}
#斯兰卡{
位置：相对位置；
底部：740px；
左：877px；
z指数：1；
}
#孟加拉国{
位置：相对位置；
底部：840px；
左：907px；
z指数：1；
}
#埃因迪亚{
位置：相对位置；
底部：870px；
左：930px；
z指数：1；
}
#泰国{
位置：相对位置；
底部：850px；
左：970px；
z指数：1；
}
#印度尼西亚{
位置：相对位置；
底部：790px；
左：1015px；
z指数：1；
}
#菲律宾{
位置：相对位置；
底部：870px；
左：1055px；
z指数：1；
}
#埃因多内西亚{
位置：相对位置；
底部：820px；
左：1120px；
z指数：1；
}
#哥伦比亚{
位置：相对位置；
底部：460px；
左：225px；
z指数：1；
}
#秘鲁{
位置：相对位置；
底部：815px；
左：220px；
z指数：1；
}
.盒子{
显示：无；
宽度：100%；
z指数：100；
}
a:悬停+.框，
.box:悬停{
显示：块；
位置：绝对位置；
}

我犯了一个错误。iframe是z索引为1的div的子元素。您只需要添加一个类，该类将在将父标记z-index悬停在其上方时将其设置为100。我添加了类

.country{z-index:100！important；}

，然后将其添加到每个country div中。子元素的z索引不能高于其父元素。

我注意到，当我将鼠标悬停在图标上时，有时它会非常滞后。有没有一种方法可以使不延迟？这与iFrame在其中加载网页有关。您可以尝试以下方法：改进代码格式，添加实时预览