Question

问题：如何仅使用CSS将其用于标签？（Tabbing已经有效）。

#menu:before {
  content:"Menu \25bc";
  font-weight:bold;
  width:100%;
}
#menu:hover:before {
  content:"Menu \25b2";
}
#menu li {
  position:absolute;
  left:-9999px;
}
#menu:hover li {
  position:relative;
  left:0;
}

<html>
  <title>Test</title>
  <body>
    <header>
      <a href="#header1">Link to homepage</a>
    </header>
    <nav>
      <ul id="menu">
        <li><a href="#menu1">Menu item 1</a></li>
        <li><a href="#menu2">Menu item 2</a></li>
      </ul>
    </nav>
    <main>
      <p>Other text with maybe a <a href="#main1">link here</a>.</p>
    </main>
  </body>
</html>

编辑：原始问题如下。

我有一个菜单：

<ul id="menu">
  <li><a href="#">Menu item 1</a></li>
  <li><a href="#">Menu item 2</a></li>
</ul>

但是，我想以较窄的页面宽度隐藏它，所以我应用以下CSS：

@media (max-width: 768px) {
  #menu:before {
    content:"Menu \25bc";
  }
  #menu:hover:before {
    content:"Menu \25b2";
  }
  #menu a {
    position:absolute;
    left:-9999px;
  }
  #menu:hover a {
    position:relative;
    left:0px;
  }
}

这会隐藏菜单，在其位置添加“菜单”一词，使用向下或向上箭头，具体取决于悬停状态，当您将鼠标悬停在菜单上时也会显示该菜单。

问题在于，虽然：hover工作得很好，我无法通过使用：focus伪类选项卡显示其中一个标签来显示。（唉，：root将不会像其他伪类一样工作，所以类似#menu a：focus：root #menu a {position：relative; left：0;}将无法工作，据我所见）。< / p>

有没有人对我如何处理这个问题有任何想法，只使用CSS？或者我把自己挖进一个洞？

Answer 1

基于下面的OP评论：

我很高兴改变HTML，但是如何：目标在这里工作？

此处是 :target

的摘录

nav {
  height: 0;
  overflow: hidden;
  position: relative;
}
nav:target {
  height: auto;
}
nav + div a:before {
  content: "Menu \25bc";
  font-weight: bold;
  width: 100%;
}
nav:target + div a:before {
  content: "Menu \25b2";
}
nav:target + div .open,
nav + div .close {
  display: none;
}
nav:target + div .close,
nav + div .open {
  display: block;
  position: absolute;
  top: 0
}

<nav id="menu">
  <ul>
    <li><a href="#menu1">Menu item 1</a>
    </li>
    <li><a href="#menu2">Menu item 2</a>
    </li>
  </ul>
</nav>
<div>
  <a class="open" href="#menu"></a>
  <a class="close" href="#"></a>
</div>

伪类：焦点不传播，现在是什么？

1 个答案: