Question

我试图在单击按钮旁边的按钮旁边创建弹出链接。但是，使用：active选择器和：hover和其他CSS选择器一样无效。

我尝试使用其他选择器，例如取消扫描和同级。

.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>

Answer 1

您可以使用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以了解更多信息。

伪类不会改变

1 个答案: