Unable to select option from social bar

I have made a sticky bar to contact me in HTML. [Image 1]
Image 1

code for the block :

[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 -->]

So when I hover on the social button it should be stuck on the screen: (Image 2)
Image 2

But when I come to select any social media it fades away.

CSS Code :

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

Thank you please help me.

I need the same social bar as its on the
https://www.brigadegroup.com/

>Solution :

As I can see you have hover state only for .socialbutton element, so when you hover over .socialhide display: none; applies. You also need to add a hover state for your .socialhide div, like that:

.socialhide {
  display: none;
}

.socialhide:hover,
.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;
}