Back-end按钮Tooltip效果不显示问题求助

你的Tooltip无法显示的核心原因是CSS选择器逻辑错误——.details-back-end并不是.back-end_link的子元素，所以.back-end_link:hover .details-back-end这个选择器无法匹配到目标元素，自然不会触发显示效果。下面提供两种修复方案：

方案一：不修改HTML结构，调整CSS选择器 #

利用通用兄弟选择器~关联按钮容器和外部的Tooltip元素：

/* 初始状态隐藏两个Tooltip，添加过渡平滑效果 */
.details-front-end, .details-back-end {
    color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease;
}

/* 当hover Back-end按钮时，显示对应的Tooltip */
.back-end_link:hover ~ .details .details-back-end {
    visibility: visible;
    opacity: 1;
}

/* 补充Front-end的hover效果（可选） */
.front-end_link:hover ~ .details .details-front-end {
    visibility: visible;
    opacity: 1;
}

⚠️ 注意：该方案依赖HTML结构中.back-end_link与.details的兄弟关系，后续调整页面结构时需注意维护这一关系。

方案二：优化HTML结构+修正CSS（更健壮推荐） #

将Tooltip移动到对应按钮的容器内部，让选择器逻辑更清晰，同时方便定位Tooltip位置：

修改后的HTML #

<div class="front-back">
    <div class="front-end_link">
        <a href="#">
            <button>FRONT-END</button>
        </a>
        <!-- Front-end Tooltip -->
        <p class="details-front-end">DETAILS ABOUT FRONT-END</p>
    </div>
    <div class="back-end_link">
        <a href="#">
            <button>BACK-END</button>
        </a>
        <!-- Back-end Tooltip -->
        <p class="details-back-end">DETAILS ABOUT BACK-END</p>
    </div>
</div>
<!-- 移除原有的独立.details容器 -->

修改后的CSS #

/* 给按钮容器设置相对定位，作为Tooltip的定位基准 */
.back-end_link, .front-end_link {
    display: flex;
    position: relative;
    margin: 0 10px; /* 增加按钮间距，可选 */
}

/* 统一Tooltip样式 */
.details-front-end, .details-back-end {
    position: absolute;
    top: -45px; /* 调整到按钮上方 */
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background-color: rgba(0,0,0,0.8);
    padding: 6px 16px;
    border-radius: 4px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
    white-space: nowrap; /* 防止文本换行 */
    z-index: 10; /* 确保Tooltip在最上层 */
}

/* hover时显示对应Tooltip */
.back-end_link:hover .details-back-end,
.front-end_link:hover .details-front-end {
    visibility: visible;
    opacity: 1;
}

/* 保留你原有的按钮样式 */
.back-end_link button{
    background-color: rgba(0, 0, 0, 0.993);
    color: aliceblue;
    border: transparent;
    transition: 0.5s;
    font-size: 30px;
    box-shadow: inset 0 0 0 0 rgb(0, 0, 0);
    padding: 10px 20px; /* 增加内边距提升美观度 */
    cursor: pointer;
}

.back-end_link button:hover{
    border: none;
    background-color: rgba(255, 255, 255, 0.949);
    color: rgba(0, 0, 0, 0.485);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.373);
    transform: scale(0.9);
    letter-spacing: 3px;
    box-shadow: inset 0 0 10px rgb(255, 255, 255), 0 0 40px rgb(255, 255, 255), 0 0 80px rgb(255, 255, 255);
}

内容的提问来源于stack exchange，提问作者BreakMans Pinto Rosa