Html 无法从社交栏中 Select 选项

我已经制作了一个粘性的栏来联系我.[图1] Image 1个

区块的代码:

[tag:
<!-- Social Sharing Bar -->
<div class="fixed right-0 bg-[#ffc113] top-40 z-50 px-5 py-3 flex flex-col space-y-3 w-16 border-solid border-2 border-neutral-900">
    <!-- Call -->
    <a href="#" class="" title="Call Us">
        <svg fill="" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="..."></path>
        </svg>
    </a>
    </div>
    <div class="fixed right-0 bg-[#ffc113] top-52 z-50 -my-1 px-5 py-3 flex flex-col space-y-3 w-16 h-40 border-solid border-2 border-neutral-900">
    <!-- Users -->
    <a href="#enquire" class="h-16 -rotate-90 whitespace-nowrap h-24 my-7" title="Share on Twitter">
        <p class="h-24 py-10 whitespace-nowrap">
            Enquire Now
        </p>
    </a>
</div>
    <div class="fixed right-0 bg-[#ffc113] top-80 z-50 px-5 py-3 flex flex-col space-y-3 w-16 border-solid border-2 border-neutral-900 socialbutton">
    <!-- Users -->
    <a href="#" title="Share on Twitter">
        <svg fill="" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="..."></path>
          </svg>
</a>
</div>
<div class="socialhide">
    <!-- <div class="flex justify-center">
        <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" class="inline-block px-6 py-2.5 mb-2 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0 active:shadow-lg transition duration-150 ease-in-out" style="background-color: #1877f2;">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="w-4 h-4">
            <path fill="currentColor" d="..."/>
          </svg>
        </button>
      </div> -->
      <div class="flex justify-center space-x-2">

        <a href="#!" role="button">
          <!-- Facebook -->
          <svg xmlns="..." class="w-7 h-7" style="color: #1877f2;">
<path fill="currentColor" d="..."/></svg>
        </a>
      
        <a href="#!" role="button">
          <!-- Instagram -->
          <svg xmlns="..."/></svg>
        </a>
      
        <a href="#!" role="button">
          <!-- Google -->
          <svg xmlns="..."/></svg>
        </a>
      
        <a href="#!" role="button">
          <!-- Twitter -->
          <svg xmlns="..."/></svg>
        </a>
      
      </div>
</div>
<!-- Content -->]

因此，当我将鼠标悬停在社交按钮上时，它应该会显示在屏幕上:(图2) Image 2个

但当我 Select 任何一种社交媒体时，它就会消失.

Css代码:

.socialhide {
  display: none;
}

.socialbutton:hover + .socialhide {
  display: flex;
  height: 48px;
  align-items: center;
  text-align: center;
  justify-content: center;
  /* color: red; */
  position: fixed;
  background: #ffc113;
  right: 65px;
  top: 39%;
  flex-direction: column;
  z-index: 999;
  border: 2px solid black;
}

谢谢，请帮帮我.

我需要和它在网上一样的社交wine 吧 https://www.brigadegroup.com/个