html - 如何使 anchor 标签显示标题而不使其可点击

Question

所以我使用 anchor 标记创建了一个小帮助，这样当用户将鼠标悬停在“？”上时他们可以看到一个小盒子，上面有一些说明。它运行良好，但是当用户单击“？”时链接它将转到页面顶部。所以我想知道是否有办法阻止该事件发生......

HTML:

<a class="questions" href="#" title="instructions are here">?</a>

CSS:

.questions:link{
    color:#fff;
    background-color:#feb22a;
    width:12px;
    height:12px;
    display:inline-block;
    border-radius:100%;
    font-size:10px;
    text-align:center;
    text-decoration:none;
    -webkit-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
}

我试过使用这样的东西，但它会阻止出现指令。

这个:

.not-active {
   pointer-events: none;
   cursor: default;
}

Answer 1

标题属性是一个global attribute所以你可以在其他元素上使用它，例如 span，它不会导致跳转:

<span class="questions" href="#" title="instructions are here">?</span>