Unable to select option from social bar - html

Question

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/

Answer 1

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