代码之家 › 专栏 › 技术社区 › Computer Looker

当我移动到下方的iframe上时,为什么这个下拉div会消失?

haml sass drop-down-menu css html

Computer Looker · 技术社区 · 8 年前

我有一个包含下拉菜单的标题。在该标题下是内容的“主体”,完全由iframe填充。当您将鼠标悬停在“选择游戏…”下拉菜单,将鼠标移到iframe上的div部分上,该div就会消失,就像将鼠标从中移出一样。如果你想亲自试一试,请看下面的钢笔。

此外,如果打开iframe的边框,则边框将通过下拉菜单显示。这让我相信,不知何故,iframe正在下拉div上方渲染;然而,即使iframe z索引返回,它仍然显示。你知道为什么我无法使用第二个下拉选项吗?

https://codepen.io/Spirit_Ryu/pen/PJwrKp/

@font-face {
  font-family: Baumans;
  src: url("./data/Baumans-Regular.ttf");
}
body {
  margin: 0 0 0 0;
  overflow-x: hidden;
}

a {
  color: black;
  text-decoration: none;
}
a:hover {
  color: #666666;
}

iframe {
  border: 0;
  z-index: 1000;
}

#visibledata {
  position: absolute;
  width: 100%;
  font-family: Baumans, sans-serif;
}

#header {
  width: 100vw;
  background: #f5f5f5;
  padding-top: 16px;
  padding-bottom: 16px;
}
#header #name {
  display: inline;
  font-size: 20pt;
  margin-left: 20px;
}
#header #pickagame {
  cursor: pointer;
  float: right;
  width: 200px;
  padding: 4px;
  margin-right: 20px;
  background: #e8e8e8;
}
#header #pickagame .dropdown {
  display: none;
  list-style: none;
  z-index: 1;
}
#header #pickagame .dropdown li {
  padding-top: 8px;
}
#header #pickagame:hover .dropdown {
  display: inline;
}

#page {
  position: absolute;
  top: 63px;
  height: 100vh;
}
#page #game {
  height: 100%;
  width: 100vw;
}

<!DOCTYPE html>
<html>
  <head>
    <link href='./data/index.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div id='visibledata'>
      <div id='header'>
        <a href='./index.html'>
          <div id='name'>All-Star Favorites Arcade</div>
        </a>
        <div id='pickagame'>
          Pick a game...
          <div style='float: right'>â¼</div>
          <div class='dropdown'>
            <a href='./data/ArmorMayhem.html' target='gameWindow'>
              <li>Armor Mayhem</li>
            </a>
            <a href='./data/ArmorMayhem.html' target='gameWindow'>
              <li>Armor Mayhem</li>
            </a>
            <a href='./data/ArmorMayhem.html' target='gameWindow'>
              <li>Armor Mayhem</li>
            </a>
          </div>
        </div>
      </div>
      <div id='page'>
        <iframe id='game' name='gameWindow'></iframe>
      </div>
    </div>
  </body>
</html>