悬停展开式圆形图标信息框移动端适配问题求助

我明白你现在的困境：桌面端靠hover能正常展开文本框，但移动端没有hover事件，点击图标直接触发链接跳转，根本没机会看到展开的文本内容。你想到的两个方案都很靠谱，下面我详细给你讲怎么落地实现：

方案一：移除图标链接，用文本实现跳转 #

这个方案逻辑更简单，完全不需要JS，核心是把跳转入口从图标转移到展开后的文本里，让移动端点击图标只触发展开，用户看完内容后再点击文本里的链接跳转。

步骤1：调整HTML结构 #

把图标外层的<a>标签去掉，新增一个隐藏的容器来存放带链接的文本内容（CSS的content没法直接加HTML链接，所以必须把文本移到HTML里）：

<section id="eddikefarver">
  <h2 class="h2titel">Vores produkter</h2>
  <div class="bigbox">
    <div class="super-box">
      <div class="infocontainer">
        <div class="boxbox1">
          <div class="icon_bg"></div>
          <!-- 新增：存放带链接的hover文本 -->
          <div class="hover-content">
            Vores røde eddiker er udelukkende IGP og DOP og findes i mange forskellige prisklasser. 
            <a href="#" class="content-link">Tryk her og se vores sortiment!</a>
          </div>
        </div>
        <div class="icon">
          <!-- 移除原有的a标签 -->
          <img width="42" height="40" src="img/balsamicoroed.png" alt="Rød balsamicoeddike ikon">
        </div>
      </div>
      <div class="text">
        <p class="title">Røde eddiker</p>
      </div>
    </div>
  </div>
</section>

步骤2：修改CSS样式 #

删掉原来用::after生成文本的代码，转而给新增的.hover-content设置样式，默认隐藏，hover时显示：

/* 移除原有的.boxbox1::after相关代码，替换为以下样式 */
.boxbox1 .hover-content {
  position: absolute;
  width: 200px;
  text-align: center;
  top: 111px;
  opacity: 0;
  font-size: 13px;
  color: #5d6494;
  line-height: 20px;
  transition: all 0.3s ease;
  transition-delay: 0.32s;
}
/* 给链接设置显眼样式，引导用户点击 */
.boxbox1 .hover-content .content-link {
  color: #2c4792;
  text-decoration: underline;
  font-weight: 500;
}
/* hover时显示文本 */
.super-box:hover .boxbox1 .hover-content {
  opacity: 1;
}

这样修改后，桌面端hover图标展开文本，移动端触摸图标也会触发hover状态显示文本，用户点击文本里的链接才会跳转，完美解决冲突。

方案二：第一次点击展开文本，第二次点击跳转 #

这个方案保留图标上的链接，用JS控制交互：第一次点击阻止跳转，触发展开效果；第二次点击允许跳转，同时重置状态。

步骤1：添加JavaScript逻辑 #

在HTML末尾插入脚本，监听图标链接的点击事件，用状态变量记录是否已展开：

<script>
// 获取图标链接元素
const productLink = document.querySelector('.billedelink');
// 标记是否已展开文本
let isContentExpanded = false;

productLink.addEventListener('click', function(e) {
  const parentBox = this.closest('.super-box');
  
  if (!isContentExpanded) {
    // 第一次点击：阻止跳转，触发展开
    e.preventDefault();
    parentBox.classList.add('active');
    isContentExpanded = true;
    
    // 可选：点击页面其他区域时关闭展开的文本
    document.addEventListener('click', function closeHandler(e) {
      if (!e.target.closest('.super-box')) {
        parentBox.classList.remove('active');
        isContentExpanded = false;
        document.removeEventListener('click', closeHandler);
      }
    });
  } else {
    // 第二次点击：允许跳转，重置状态
    isContentExpanded = false;
  }
});
</script>

步骤2：修改CSS样式 #

把原来的.super-box:hover相关样式复制一份，改成.super-box.active，让JS添加类时也能触发展开效果：

/* 复制原有的hover样式，添加active类版本 */
.super-box:hover .boxbox1, .super-box.active .boxbox1,
.super-box:hover .boxbox2, .super-box.active .boxbox2,
.super-box:hover .boxbox3, .super-box.active .boxbox3 {
  box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
  transition-delay: 0.32s;
}
.super-box:hover .icon_bg, .super-box.active .icon_bg {
  transform: translateY(-32px) scale(6);
}
.super-box:hover .icon, .super-box.active .icon {
  transform: translateY(-48px) scale(1.4);
}
.super-box:hover .text, .super-box.active .text {
  opacity: 0;
  transform: translateY(-4px) scale(.8);
}
.super-box:hover .boxbox1::after, .super-box.active .boxbox1::after,
.super-box:hover .boxbox2::after, .super-box.active .boxbox2::after,
.super-box:hover .boxbox3::after, .super-box.active .boxbox3::after {
  opacity: 1;
}

这个方案下，移动端第一次点击图标展开文本，第二次点击跳转；桌面端依然可以用hover展开，点击图标直接跳转（如果想让桌面端也和移动端一样逻辑，稍微调整JS判断即可）。

方案选择建议 #

• 如果追求简单易维护，选方案一，不需要JS，用户交互逻辑更清晰；
• 如果想保留图标点击跳转的原有设计，选方案二，但需要额外维护JS状态。

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