如何在不使用JavaScript的情况下将一个span样式设置成类似于链接的样式？

Question

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

因此，我必须手动编写样式使这些看起来像链接。我使用了:hover和:visited伪类来更改背景和文字颜色，但如果我想将鼠标默认指针在悬停时更改为手指图标，我需要使用JavaScript吗？还是可以使用CSS实现？

另外，我刚刚意识到：我也可以使用<a>标签而不是<span>，只需添加一个onclick属性而不是href属性即可，它应该可以正常工作，对吗？

- user1787489

---

如果您省略所有锚点并改用 span，则会对搜索引擎进行惩罚，因为蜘蛛不再知道没有 href 时该爬取什么内容了。 - easwee

@user1787489，您能否请澄清在使用Ajax方面，使用<span>标签相比<a>标签的优势是什么？我对“onclick ajax events as attributes”感到困惑。非常感谢 :) - oikos99

Answer 1

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

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

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

此外，您可以使用 :hover 伪类在鼠标悬停时设置元素的样式（可以使用任何样式而不只是原本使用的样式）。例如：

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

- Dharman

Answer 2

请注意，如果您的网站是公开的并且希望搜索引擎爬行您的网站，那么在没有 href 的链接中省略链接会使您失去很多机会。因为在爬行您的页面时，蜘蛛没有任何可以抓取的内容。

您应该使用完整的链接-以防万一 JavaScript 出现故障，用户仍然可以浏览网页：

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

你可以使用preventDefault()通过jquery禁用链接 - 这样你就完全分离了基础的HTML和JavaScript部分，意味着即使没有JavaScript也可以正常使用你的网站。

所以你不需要担心鼠标悬停等任何事情 - 但只是为了好玩。

span:hover {
cursor:pointer;
}

将使悬停在span上时启用悬停手指光标。

- easwee

---

请注意，在不同的浏览器中，preventDefault()可能会产生不可靠的效果。直到最近，IE才允许您阻止某些事件。虽然浏览器变得越来越标准化，但覆盖默认浏览器行为应该谨慎进行，并需要大量的跨浏览器测试。 - lvoelk

@Ivoelk，请给我展示一个确切的样例，说明preventDefault()不起作用的情况。另外你在回复一个四年前的答案。 - easwee

:hover是多余的，cursor表示“当指向该元素时更改鼠标光标”，而:hover表示“当指向该元素时”，因此您正在说“当您指向该元素并且当您指向该元素时更改鼠标光标”。 - Quentin

Answer 3

选项1

只需按照下面的锚链接即可：

<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*/
}

- Amyth

---

如果你有一个单页应用程序，# 符号会对一切产生影响，当你并非想要改变 URL 时，这样做并不总是一个好主意。 - pilavdzice

Answer 4

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

- Muhammad Bilal

Answer 5

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

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

http://jsfiddle.net/kkepg/

- Stefan Neubert

Answer 6

你可以使用锚点。但是在JavaScript中，你需要使用event.preventDefault()。但有一种CSS方法更小更易用。保留你的标签并使用以下代码：

span:hover{
    cursor:pointer;
}

- bashleigh

---

@StefanNeubert 如果他还想在hover时添加特定属性到元素上，同时改变光标，该怎么办？ - bashleigh

当然，你需要它。但是你应该始终保持代码简洁，省略不必要的伪属性。 - Stefan Neubert

Answer 7

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

您还可以使用 <a> 标签代替 <span>，实际上它们可以在屏幕阅读器和其他类似设备中表现得更好。如果您在 onClick 处理程序中使用 preventDefault() 和 stopPropagation() JavaScript 函数，则不需要省略 href 属性。这样，您可以保留一定程度的向后兼容性，以适应非 JS 启用的浏览器。

- Kaivosukeltaja

Answer 8

您可以使用按钮代替 span，并使用 Bootstrap CSS 类来将其样式设置为链接：

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

它会像普通链接一样在鼠标悬停时产生反应。 运行代码片段以预览结果：

<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>

- Ferdinand

---

这并没有提供问题的答案。您可以搜索类似的问题，或者参考页面右侧的相关和链接问题来找到答案。如果您有一个相关但不同的问题，请提出新问题，并包含此问题的链接以帮助提供上下文。请参阅：提问，获取答案，无干扰。 - phoenixstudio

这不是对这个问题的答案。它说明如何使一个span看起来像一个链接。 - Kiriakos Grhgoriadhs

Answer 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="javascript:void(0)" ...>替换href="#"仍然是一个好主意。

其他人提到了使用event.preventDefault()和stopPropagation()。我不记得曾经使用过其中之一，但我必须承认，自从上次在HTML链接中编写JavaScript以来已经过去了很多年，因此您应该确实调查这两个函数的使用。

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

- SylvainL