1

我有一个案例，我的设计要求我声明这个类：

.panel {
  position: fixed;
  top: 100vh; 
  height: 90vh;
  margin: 0px;
  padding: 0px;
  width: 100%;
  transition-property: top;
  transition-duration: 1s;
}

.panel:before {
  background-color: inherit;
  top: -1.5em;
  width: 10em;
  text-align: center;
  font-weight: bold;
  content: attr(id);
  position: absolute;
  border-bottom: none;
  border: .5em solid black;
  border-top-color: inherit;
  border-left-color: inherit;
  border-right-color: inherit;
  border-bottom: none;
  border-radius: 25%;
  border-bottom-right-radius: 0%;
  border-bottom-left-radius: 0%;
}

简而言之，面板是通过<a href="panel id">foo</a>样式链接定位时飞入的选项卡。

在其默认状态下，面板位于屏幕底部，这会创建一行隐藏的面板对象，其之前的面板对象显示为屏幕底部的选项卡。

这些面板的 HTML 是<section id="about" class="panel color">...</section>（其中颜色类目前有效地呈现，但将升级以反映特定的选项卡用途。

因此，我要解决的挑战是状态栏会阻止感觉错误的面板选项卡，我相信解决方案是在悬停任何链接时将它们稍微提高一点（3 或 4 VH）。这保留了状态栏的完整性、链接的完整性和网站的外观；将状态栏视为调整窗口大小。

我曾相信这a:hover ~ * .panel { top: 97vh; }是执行此操作的正确解决方案，但它似乎并没有被解雇。

4

0 回答 0