html - 伪类不会改变

我试图创建一个按钮旁边的弹出式链接时，该按钮被点击。但是使用：active选择器是无效的，就像：hover和其他CSS选择器一样。
我试过使用其他选择器，如descandent和sibling。

.stretch {
	display: none;
	border: groove;
	border-width: thin 0vh thin 0vh;
	align-items: center;
	justify-content: center;
	position: relative;
}

.Links:active .stretch {
	display: inline-flex;
}

<div class ="Links">
  <button> Links
    <p></p>
  </button> <!--Move arrow & slide function on links-->
  <div class = "stretch">
    <button>
      <a id = "HLec">Harvard lec: <br> link</a>
    </button>
    <button>
      <a id = "Hex">TLDW: <br> link</a>
    </button>
    <button>
      <a id = "Vox">Vox (Don't skim the recipe): <br> link </a>
    </button>
  </div>
</div>

最佳答案

您可以使用CSS :target Selecor。去实现你想要的。

.stretch {
	display: none;
	border: groove;
	border-width: thin 0vh thin 0vh;
	align-items: center;
	justify-content: center;
	position: relative;
}

.stretch:target {
	display: inline-flex;
}

<div class ="Links">
  <a href="#elem-target"> Links
    <p></p>
  </a> <!--Move arrow & slide function on links-->
  <div class = "stretch" id="elem-target">
    <button>
      <a id = "HLec">Harvard lec: <br> link</a>
    </button>
    <button>
      <a id = "Hex">TLDW: <br> link</a>
    </button>
    <button>
      <a id = "Vox">Vox (Don't skim the recipe): <br> link </a>
    </button>
  </div>
</div>

有关更多信息，请访问link以了解更多信息。

关于html - 伪类不会改变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57403440/