CSS - 使 div “可点击”答案

【问题标题】：CSS - Make a div "clickable"CSS - 使 div “可点击”
【发布时间】：2011-05-25 10:35:15
【问题描述】：

我想知道如何渲染一个可点击的 div（就像一个链接，当我用鼠标移动时用小手）。

我有一些这样的元素：

<div class="teamSelector">Some</div>

使用这个 jQuery：

$('.teamSelector').click(function() { 
    // some functions
});

干杯

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您已经在示例中使其可点击。如果您希望它“看起来”可点击，您可以添加一些 CSS：

.teamSelector { cursor: pointer; }

或者继续使用 jQuery：

.click(function() { do something }).css("cursor", "pointer");

Here is 游标属性的 W3 学校参考。

【讨论】：

是的。我在帖子中添加了指向 w3 学校的链接。它提到了浏览器支持。
@markzzz 您应该将 tabindex 属性添加到任何不是链接或表单元素但您选择使其可点击的元素（顺便说一句，为什么？）。继续上面的 jQuery 行：.css(...).attr('tabindex', 0); 你的页面是否可以在没有 JS 的情况下工作？
为什么？ w/o=没有？对不起，我不明白:)

【解决方案2】：

难道你不能，你知道，让它成为一个链接并设置它的样式吗？它会更容易和易于访问。

【讨论】：

【解决方案3】：

它的css是：

.teamSelector
{
  cursor: pointer
}

您也可以添加悬停效果，但我不确定 :active 是否可以跨浏览器使用。

如果您需要可点击的内容，最好使用button 或a 元素并对其进行样式设置。您始终可以使用 javascript 阻止默认操作。它更好的原因是为了便于访问，以便使用屏幕阅读器的用户知道有一些东西可以与之交互。

编辑添加：当您浏览一个页面时，您可以按空格键click 一个元素。这在非交互式元素上的工作方式不同，因此使用该功能的任何人都将无法使用您正在制作的任何东西。

【讨论】：

+1，它不仅适用于屏幕阅读器，而且适用于仅使用键盘而不使用鼠标的任何残疾人。链接（加号按钮和输入）就是为此而设计的。 tabindex 属性会将一个元素添加到选项卡列表中，但实际上是为此创建了链接。

【解决方案4】：

这个问题已经很老了，但需要补充：

如果你想用基于指针的用户交互来包装组件，你应该更喜欢按钮元素而不是div（你仍然可以显示它block）。

<button class="teamSelector" tabindex="1">Some</button>

风格：

.teamSelector{
    user-select: none; // this sets the element unselectable, unlike texts
    cursor: pointer; // changes the client's cursor
    touch-action: manipulation; // disables tap zoom delaying for acting like real button
    display: block; // if you want to display as block element
    background: transparent; //remove button style
    border: 0; //remove button style
}

【讨论】：

【解决方案5】：

我们可以通过添加 style=cursor:'pointer' 来显示可点击的 div 元素。例如：

  <div style="cursor: pointer;">edit</div>

当我们用鼠标越过 div 元素时，它会带来小手。

【讨论】：

绝对是最容易理解的答案