【问题标题】：How do I style a span to look like a link without using javascript?如何在不使用 javascript 的情况下将 span 设置为看起来像链接？
【发布时间】：2012-12-28 13:13:00
【问题描述】：

对于我的网站，我需要使用 <span> 而不是 <a>，因为我主要使用 ajax，因此我在 span 中使用 onclick ajax 事件作为属性而不是链接。

因此，我不得不手动设置 span 的样式，使其看起来像链接。我已经使用悬停并访问了伪类来更改背景和文本颜色，但是要将鼠标默认更改为悬停时的指针，我需要使用 javascript 吗？或者我可以使用 css 做到这一点吗？

另外，我刚刚意识到：无论如何，我不能只使用<a> 标签而不是<span>，而是仅仅使用一个href，而不是一个onclick？它应该工作一样，不是吗？

【问题讨论】：

如果你省略所有锚点并使用span 代替你在搜索引擎上惩罚自己，因为蜘蛛不知道没有href 再爬什么。
@user1787489 能否请您澄清在ajax 方面使用优于的优势是什么？我对“onclick ajax 事件作为属性”感到困惑。非常感谢:)

标签： html css

【解决方案1】：

span {
     cursor:pointer;
     color:blue;
     text-decoration:underline;
}

<a href="#">Hyperlink</a><br />
<span>Span</span>

此外，您可以使用:hover 伪类在悬停时为元素设置样式（您可以使用任何样式，而不仅仅是最初使用的样式）。例如：

span:hover {
     text-decoration:none;
     text-shadow: 1px 1px 1px #555;
}

【讨论】：

【解决方案2】：

请注意，如果您的网站是公开的，并且您指望搜索引擎来抓取您的网站，那么在没有 href 的情况下遗漏链接会损失很多，因为蜘蛛在抓取您的页面时没有任何东西可以抓取。

您应该使用完整的链接 - 如果您的 javascript 发生故障，用户仍然能够浏览页面：

<a href="http://www.example.com">Link</a>

您可以使用 preventDefault() 禁用与 jquery 的链接 - 而且您完全分离了基本 html 和 javascript 部分，这意味着您的网站在没有 javascript 的情况下仍然可用。

你不需要为跨度悬停和任何事情而烦恼 - 只是为了它

span:hover {
cursor:pointer;
}

将在悬停的跨度上启用悬停手形光标。

【讨论】：

请记住 preventDefault() 在不同的浏览器中可能会产生不可靠的效果。 IE 甚至允许您阻止某些事件只是最近的一个变化。虽然浏览器变得越来越标准化，但覆盖默认浏览器行为应该小心谨慎，并且需要大量的跨浏览器测试。
@Ivoelk 在 preventDefault() 不起作用时向我展示确切的示例。您还回复了一个 4 岁的答案。
:hover 是多余的，cursor 表示“指向此元素时更改鼠标光标”，:hover 表示“指向此元素时”，所以您说的是“更改鼠标当您指向此元素和指向此元素时的光标”。

【解决方案3】：

只需在您的 span css 中添加 cursor:pointer;。

【讨论】：

【解决方案4】：

选项1

只需使用anchor 链接，如下所示：

<a href="#" onclick="someFunction();"> Link </a>

选项2

我不知道您为什么要使用 span ，但如果您这样做了，您可以使用以下样式使其看起来类似于锚链接。

span {
    color: #000000; /* Change this with links color*/
    cursor: pointer;
    text-decoration: underline;
}

span:hover {
    color: #444444; /* Change the value to with anchors hover color*/
}

【讨论】：

如果你有一个单页应用程序，# 会搞砸一切，当你不尝试时更改 URL 并不总是一个好主意

【解决方案5】：

使用 CSS 将光标显示为指针：

<span style="cursor: pointer;">Pseudolink</span>

http://jsfiddle.net/kkepg/

【讨论】：

【解决方案6】：

你可以使用锚。但是在javascript中你必须使用event.preventDefault()但是有一个更小更容易的CSS方法。保持你的跨度并使用它：

span:hover{
    cursor:pointer;
}

【讨论】：

@StefanNeubert 如果他还想为hover 上的元素添加特定属性以及更改光标怎么办？
那么你当然需要它。但是您应该始终保持代码简洁并省略不必要的伪属性。

【解决方案7】：

您可以通过指定cursor: pointer CSS 规则将光标更改为指针。

您也可以使用<a> 标签代替<span>，事实上它们在屏幕阅读器和其他类似设备上表现得更好。如果您在 onClick 处理程序中使用 preventDefault() 和 stopPropagation() JavaScript 函数，则无需省略 href 属性。通过这种方式，您可以在一定程度上保持与不支持 JS 的浏览器的向后兼容性。

【讨论】：

【解决方案8】：

您可以使用按钮而不是 span，并使用引导 css 类将其设置为像链接一样的样式：

<button class="btn btn-link">Link</button>

它会像普通链接一样对 mouseOver 做出反应。运行代码 sn -p 预览结果：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button class="btn btn-link">this is my link styled with bootstrap</button>

【讨论】：

这没有提供问题的答案。您可以search for similar questions，或参考页面右侧的相关和链接问题找到答案。如果您有一个相关但不同的问题，ask a new question，并包含指向此问题的链接以帮助提供上下文。见：Ask questions, get answers, no distractions
这不是这个问题的答案。写了如何让span看起来像一个链接

【解决方案9】：

您可以使用 onClick 事件，但如果我没记错的话，您必须返回 false 以防止页面跳转；类似：

<a href="#" onClick="myfunction();return false;">

或者：<a href="#" onClick="return myfunction();">，前提是 myfunction 将返回 false。

您也可以直接从 href 调用 javascript，但您必须将结果强制转换为 void 以阻止浏览器尝试将结果作为有效链接：

<a href="javascript:void(myFunction())">

即使你仍然想使用 onClick 属性；将href="#" 替换为href="javascript:void(0)" ...> 仍然是一个好主意。

其他人提到过使用event.preventDefault() 和stopPropagation()。我不记得曾经使用过其中之一，但我必须承认，自从我上次在 HTML 链接中编写一些 javascript 代码以来已经有很多年了；所以你一定要研究一下这两个函数的使用。

编辑：也许有时使用href="javascript:void(0)" 可能是个坏主意；见http://drupal.org/node/1193068。

【讨论】：