Question

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

.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; }是解决这个问题的正确方法，但它似乎没有解雇。

CSS :: hover和兄弟选择器

0 个答案: