CSS :focus 什么都不做

Question

新来的，如果我做错了，请见谅。

我正在尝试使用 CSS :focus，但它不起作用。

我正在尝试使用它在单击时显示下拉列表

这是我的代码：

button:focus + .ulprojects {
    opacity: 1;
    pointer-events: all;
}

<body>
    <nav>
        <div class="dropdown"> 

            <button><a href="#" class="home">home</a></button>
            <div class="projects">
                <button>projects</button>

                <ul class="ulprojects">
                    <li><a href="#">project</a></li>
                    <li><a href="#">project</a></li>
                    <li><a href="#">project</a></li>
                    <li><a href="#">project</a></li>
                    <li><a href="#">project</a></li>
                </ul>
            </div>

            <div class="products">
                <button>products</button>
                <ul>
                    <li><a href="#">product</a></li>
                    <li><a href="#">product</a></li>
                    <li><a href="#">product</a></li>
                    <li><a href="#">product</a></li>
                    <li><a href="#">product</a></li>
                </ul>
            </div>

            
        </div>
    </nav>
</body>

在此先感谢，请告诉我我做错了什么。

Answer 1

正如您在 css 中提到的，您需要在单击 ulprojects 按钮时执行此操作，因此您必须默认隐藏 ulprojects 并将其设置为 display:block 当您关注按钮时.

    button:focus + .ulprojects {
    opacity: 1;
    pointer-events: all;
    display:block!important;
}
.ulprojects{display:none}

查看工作演示：

button:focus+.ulprojects {
  opacity: 1;
  pointer-events: all;
  display: block !important;
}

.ulprojects {
  display: none;
}

<body>
  <nav>
    <div class="dropdown">

      <button><a href="#" class="home">home</a></button>
      <div class="projects">
        <button>projects</button>

        <ul class="ulprojects">
          <li><a href="#">project</a></li>
          <li><a href="#">project</a></li>
          <li><a href="#">project</a></li>
          <li><a href="#">project</a></li>
          <li><a href="#">project</a></li>
        </ul>
      </div>

      <div class="products">
        <button>products</button>
        <ul>
          <li><a href="#">product</a></li>
          <li><a href="#">product</a></li>
          <li><a href="#">product</a></li>
          <li><a href="#">product</a></li>
          <li><a href="#">product</a></li>
        </ul>
      </div>


    </div>
  </nav>
</body>

CSS :focus 什么都不做

CSS :focus doesn't do anything

html

css

focus