作为伪链接的文本元素答案

【问题标题】：Text element as a pseudo-link作为伪链接的文本元素
【发布时间】：2014-01-04 19:07:24
【问题描述】：

我正在使用 html/css/jquery 构建一个交互式表格，并希望在单击我的文本元素时使用滑动切换 jQuery 操作。我发现我不能使用“a”标签，因为空的 href="" 只会重新加载页面，而当将鼠标悬停在元素上时，完全省略“href”会将光标变成“I”，就像它会带有“p”标签。

基本上我要问的是，有没有办法添加一个文本元素，使光标在悬停时充当链接（鼠标头变成手用手指），但不链接到任何地方？

【问题讨论】：

标签： jquery html css text hyperlink

【解决方案1】：

不要将光标变成指针，您可以使用值为 pointer 的 CSS cursor 属性轻松地做到这一点，而是使用 event.preventDefault();，这将防止您面临的问题。

$('div.toggle').hide();
  $('a.open_toggle').click(function(event){
    event.preventDefault();
    $(this).next('div').slideToggle(500);
  }             
);

Demo

【讨论】：

【解决方案2】：

您可以使用此 CSS 来获取您正在寻找的鼠标光标行为：

.link {
  cursor: pointer;
}

然后像这样将这个类添加到您的 HTML 中：

<span class='link'>link</span>

或者您可以将其添加到这样的可点击元素中 (css tricks)：

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
   cursor: pointer;
}

【讨论】：

【解决方案3】：

你可以像这样使用 CSS 设置光标样式：

p:hover{cursor:pointer}

您还可以防止锚链接执行这样的页面重新加载（jQuery）：

$(document).on("click", "a", function(e){
e.preventDefault();
// do something...
})

【讨论】：

我完全不知道光标是可操作的，这是一个很好的解决方案，谢谢！