修改无href值<a>标签指针样式及阻止点击跳转问题

问题说明 #

页面中有一个包含3张图片的模块，鼠标悬停图片时会显示文本。需保留无跳转的区块实现（不指定href属性值），解决以下两个问题：

1. 点击悬停文本区域时，避免页面跳转到顶部，或让该区域不可点击；
2. 鼠标移至图片上时，将指针样式改为普通箭头样式。

修改方案 #

1. 代码结构调整（解决点击跳转问题） #

原代码中使用的<a href="#">是点击后跳转至页面顶部的核心原因。我们可以直接将<a>标签替换为<div>（保留原有类名以维持样式），彻底规避a标签的默认跳转行为，同时删除原代码末尾多余的</a>标签，修复结构错误：

修改后的核心代码片段：

<div class="col col-xs-12 col-sm-6 col-lg-4">
  <!-- 替换<a>为<div>，移除href属性 -->
  <div class="block h-100 bg-white-base transition">
    <div class="relative image">
      <?php if($hover_text): ?>
      <div class="textarea relative pt pb pl pr no-touch select-none">
        <div class="bg-white-base pl pr">
          <article class="center-xs"><?php echo $hover_text; ?></article>
        </div>
      </div>
      <?php endif; ?>
      <?php if($image): ?>
      <div class="object-cover-wrap">
        <picture>
          <source media="(max-width: 360px)" srcset="<?php echo($image['sizes']['xsmall']); ?>">
          <source media="(max-width: 640px)" srcset="<?php echo($image['sizes']['small']); ?>">
          <source media="(max-width: 1024px)" srcset="<?php echo($image['sizes']['medium']); ?>">
          <source srcset="<?php echo($image['sizes']['large']); ?>">
          <img src="<?php echo($image['sizes']['large']); ?>" alt="<?php echo $image['alt']; ?>" />
        </picture>
      </div>
      <?php endif; ?>
    </div>
  </div>
  <div class="pt pb pl pr center-xs title transition">
    <h3 class="mb0 h5 transition">
      <?php echo $title_text; ?>
    </h3>
  </div>
</div>

若坚持保留<a>标签（不指定href），可添加JS代码阻止点击默认行为：

// 绑定点击事件，阻止跳转
document.querySelectorAll('.seamless-gifting .block').forEach(el => {
  el.addEventListener('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
  });
});

2. CSS修改（解决指针样式问题） #

添加以下CSS代码，将图片区域的鼠标指针改为普通箭头：

/* 设置图片区域指针为默认箭头 */
.seamless-gifting .image {
  cursor: default;
}
/* 若保留a标签，需额外设置a标签的指针样式 */
.seamless-gifting .block {
  cursor: default;
}

效果说明 #

• 修改后点击悬停文本区域不会触发页面跳转；
• 鼠标移至图片上时，指针显示为普通箭头，而非链接默认的手型样式。

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