固定社交悬浮栏交互异常：hover触发后无法选中社交媒体选项求助

我用HTML实现了一个固定悬浮联系栏（），需求是鼠标hover到.socialbutton按钮时，.socialhide容器内的社交媒体选项固定显示（），但实际操作中，鼠标移向社交媒体选项时容器会消失，想要实现类似目标网站的社交栏效果。

现有代码 #

HTML代码 #

<!-- 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 space-x-2">
        <a href="#!" role="button">
            <!-- Facebook -->
            <svg xmlns="..." class="w-7 h-7" style="color: #1877f2;">
                <path fill="currentColor" d="..."></path>
            </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>

CSS代码 #

.socialhide {
  display: none;
}

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

问题原因 #

当前使用的相邻兄弟选择器+仅在.socialhide是.socialbutton的直接相邻元素时生效，且鼠标离开.socialbutton后，hover状态消失，.socialhide随即隐藏。鼠标移向社交媒体选项时，会脱离.socialbutton的hover范围，导致容器消失。

解决方案 #

将.socialbutton和.socialhide放入同一个父容器，通过父容器的hover状态控制子元素显示，确保鼠标移到社交媒体选项时，父容器仍处于hover状态。

修改后的HTML结构 #

<!-- 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="social-container fixed right-0 top-80 z-50">
    <div class="bg-[#ffc113] px-5 py-3 flex flex-col space-y-3 w-16 border-solid border-2 border-neutral-900 socialbutton">
        <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 space-x-2">
            <a href="#!" role="button">
                <!-- Facebook -->
                <svg xmlns="..." class="w-7 h-7" style="color: #1877f2;">
                    <path fill="currentColor" d="..."></path>
                </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>
</div>

修改后的CSS代码 #

.socialhide {
    display: none;
}

/* 通过父容器hover控制子元素显示 */
.social-container:hover .socialhide {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: center;
    position: fixed;
    background: #ffc113;
    right: 65px;
    top: 39%;
    z-index: 999;
    border: 2px solid black;
}

/* 可选：扩大父容器点击区域，避免鼠标移动时断开hover */
.social-container {
    height: 100px; /* 覆盖按钮和选项的垂直范围 */
}

说明 #

• 父容器social-container采用固定定位，保持原有的悬浮位置。
• 鼠标hover父容器时，.socialhide会持续显示，即使鼠标移到社交媒体选项上，父容器的hover状态不会消失。
• 扩大父容器高度可以确保鼠标从按钮移到选项的路径在父容器范围内，避免中途失去hover状态导致容器隐藏。

内容的提问来源于stack exchange，提问作者Dhawan Solanki