能否不使用按钮或链接运用:focus伪类？游戏场景适配需求

方案1：搞定标签的跳转提示问题 #

问题出在<a href="#">点击后会触发页面跳转（回到顶部），游戏环境才弹出确认提示。解决办法有两个：

• 把href="#"改成href="javascript:void(0)"，直接掐断跳转行为：

  <a href="javascript:void(0)" class="button">more</a>
  

• 或者保留href="#"，加个点击事件阻止默认行为：

  <a href="#" class="button" onclick="event.preventDefault()">more</a>
  

  两种方法都能让点击时不触发跳转，也就不会弹提示，原来的:focus逻辑还能正常用。

方案2：不用链接/按钮，纯div+:focus实现 #

既然游戏不让用按钮，直接换个普通<div>就行，给它加个tabindex属性就能获取焦点，配合:focus伪类照样实现交互：

修改后的HTML #

<div class="morebuttonbox">
  <div class="button" tabindex="0">more</div>
</div>
<div class="contentbox2">
  <div class="byi">
    <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px;   border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;">byi</span> text text text text text text text text text text text text text ...

    <div class="dni">
      <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px;   border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;">dni</span> text text text text text text text text text text text text text ...
    </div>
  </div>
</div>

调整后的CSS #

.button {
  /* 原有样式不动 */
  font-size: 14px;
  background: #e0e0e0;
  padding: 2px;
  width: 50px;
  text-align: center;
  margin-left: 9px;
  margin-top: 18px;
  border: 1px ridge black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
  position: absolute;
  /* 加这俩样式，优化体验 */
  outline: none;
  cursor: pointer;
}

/* 可选：焦点状态加个视觉反馈，让用户知道点中了 */
.button:focus {
  background: #d0d0d0;
  border-color: #7d6f85 #8b7c94 #ae9cb9 white;
}

/* 原来的显示逻辑保留 */
.morebuttonbox:has(.button:focus)~.contentbox2 {
  opacity: 1;
  z-index: 10;
}

为啥这方案能行？ #

• tabindex="0"让普通div能通过点击或者Tab键获取焦点，满足:focus的触发条件。
• 点屏幕其他地方时，div会自动失焦，:focus状态消失，contentbox2就自动隐藏了，完美符合需求。
• 全程没用到按钮或链接标签，避开游戏的限制。

内容的提问来源于stack exchange，提问作者hallodu