如何实现Footer隐藏时Hover上箭头才显示data-title及拓展方案

需求一：仅footer隐藏时，悬停up-arrow显示data-title #

核心思路 #

通过CSS选择器关联footer的隐藏状态，只有当footer处于隐藏状态时，才触发up-arrow的hover tooltip显示逻辑。无需频繁增删data-title属性，利用选择器控制样式显隐更高效。

代码实现 #

基础HTML结构

<footer class="site-footer">底部栏内容</footer>
<button class="up-arrow" data-title="回到顶部">↑</button>

CSS样式

/* 默认隐藏tooltip */
.up-arrow[data-title]::after {
  content: attr(data-title);
  position: absolute;
  opacity: 0;
  pointer-events: none;
  /* 基础tooltip样式 */
  background: #222;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: -32px;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.2s ease;
}

/* footer隐藏时，hover箭头才显示tooltip */
.site-footer.hidden ~ .up-arrow[data-title]:hover::after {
  opacity: 1;
}

/* footer隐藏状态样式 */
.site-footer.hidden {
  display: none;
  /* 若需保留占位空间，改用visibility: hidden; height: 0; overflow: hidden; */
}

状态切换JS（动态控制footer显示/隐藏）

// 示例：点击按钮切换footer状态
const toggleFooterBtn = document.querySelector('#toggle-footer');
toggleFooterBtn.addEventListener('click', () => {
  const footer = document.querySelector('.site-footer');
  footer.classList.toggle('hidden');
});

如果footer和up-arrow不是兄弟节点，可给body添加状态类关联：

// 切换footer时同步更新body类名
footer.classList.toggle('hidden');
document.body.classList.toggle('footer-hidden');

对应的CSS调整为：

body.footer-hidden .up-arrow[data-title]:hover::after {
  opacity: 1;
}

需求二：footer显示时，悬停仍显示data-title，且tooltip固定在箭头上方（不随箭头旋转） #

核心思路 #

避免tooltip继承箭头的旋转属性，要么将tooltip与箭头分离为独立元素，要么给tooltip设置反向旋转抵消箭头的旋转效果。

方案1：分离箭头与tooltip容器（推荐） #

通过容器包裹箭头，tooltip相对于容器定位，不受箭头旋转影响。

HTML结构

<div class="arrow-wrapper">
  <button class="up-arrow-icon" data-title="回到顶部">↑</button>
  <span class="tooltip"></span>
</div>
<footer class="site-footer">底部栏内容</footer>

CSS样式

.arrow-wrapper {
  position: relative;
  display: inline-block;
}

.up-arrow-icon {
  /* 箭头旋转逻辑：footer显示时转180度 */
  transition: transform 0.3s ease;
}

.site-footer:not(.hidden) .up-arrow-icon {
  transform: rotate(180deg);
}

.tooltip {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  background: #222;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}

.arrow-wrapper:hover .tooltip {
  opacity: 1;
}

JS同步tooltip内容

const arrowIcon = document.querySelector('.up-arrow-icon');
const tooltip = document.querySelector('.tooltip');
// 初始化tooltip内容
tooltip.textContent = arrowIcon.dataset.title;

// 若data-title动态变化，用MutationObserver监听更新
const observer = new MutationObserver(mutations => {
  mutations.forEach(m => {
    if (m.attributeName === 'data-title') {
      tooltip.textContent = arrowIcon.dataset.title;
    }
  });
});
observer.observe(arrowIcon, { attributes: true });

方案2：伪元素反向旋转（无需额外DOM元素） #

通过给tooltip伪元素设置反向旋转，抵消箭头的旋转，保持tooltip位置不变。

CSS样式

.up-arrow[data-title] {
  position: relative;
  transition: transform 0.3s ease;
}

/* footer显示时箭头旋转180度 */
.site-footer:not(.hidden) .up-arrow[data-title] {
  transform: rotate(180deg);
}

.up-arrow[data-title]::after {
  content: attr(data-title);
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  background: #222;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}

/* footer显示时，给tooltip伪元素反向旋转180度，抵消箭头旋转 */
.site-footer:not(.hidden) .up-arrow[data-title]::after {
  transform: translateX(-50%) rotate(-180deg);
}

.up-arrow[data-title]:hover::after {
  opacity: 1;
}

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