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

code for the block :

[tag:
<!-- Social Sharing Bar -->
<div >
    <!-- Call -->
    <a href="#"  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 >
    <!-- Users -->
    <a href="#enquire"  title="Share on Twitter">
        <p >
            Enquire Now
        </p>
    </a>
</div>
    <div >
    <!-- 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 >
    <!-- <div >
        <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light"  style="background-color: #1877f2;">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" >
            <path fill="currentColor" d="..."/>
          </svg>
        </button>
      </div> -->
      <div >

        <a href="#!" role="button">
          <!-- Facebook -->
          <svg xmlns="..."  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/

CodePudding user response：

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