CSS :focus 什么都不做答案

【问题标题】：CSS :focus doesn't do anythingCSS :focus 什么都不做
【发布时间】：2021-03-28 18:32:23
【问题描述】：

如果我做错了什么，非常抱歉。

我正在尝试使用 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>

提前谢谢，请告诉我我做错了什么。

【问题讨论】：

聚焦还是点击？哪一个？你能在这里确认一下需要吗？
我正在尝试在单击按钮时执行某些操作。有什么可以在这里使用的 onclick 吗？
您可以使用复选框或使用 JS 并添加一个类来模拟“焦点”。 PS：不要在按钮内使用 nchor，反之亦然。它是无效的 HTML 标记。我们可以使用锚点作为指向另一个资源的链接，也可以使用按钮触发脚本。如果两者都需要，请直接向锚点添加一个 onlcick 触发器。

标签： html css focus

【解决方案1】：

正如您在 css 中提到的，您需要在单击 ulprojects 按钮时执行此操作，因此您必须默认隐藏 ulprojects 并将其设置为在您关注按钮时显示：阻止。

    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>

【讨论】：

我删除了你的小提琴并插入了一个 stacksn-p。请不要使用小提琴作为演示工具。如果链接更改或被删除，或者小提琴的内容发生更改，则 anwser 对社区没有进一步的价值。代码必须始终使用堆栈 sn-p (Ctrl + M) 来演示。小提琴可以用作 stacksn-p 的扩展，但不能用作独立的。
对不起大家，这是Firefox的问题，我猜它会阻止一些弹出窗口..感谢您的帮助
@potato 不客气 :) 很高兴听到你想通了