Question

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

我有一些这样的元素：

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

使用这个jQuery：

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

干杯

Answer 1

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

.teamSelector { cursor: pointer; }

继续使用jQuery：

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

Here is W3学校引用了游标属性。

Answer 2

它的css是：

.teamSelector
{
  cursor: pointer
}

你也可以添加悬停效果，但我不确定：active是否可以跨浏览器工作。

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

编辑添加：在标签页面中，您可以点击空格键click元素。这在非交互元素上不会起作用，因此使用该功能的任何人都无法使用您正在制作的任何内容。

Answer 3

难道你不能，你知道，把它作为一个链接和风格吗？它会更容易和方便。

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

Answer 5

我们只需添加style = cursor：'pointer'即可显示可点击的div元素。例如：

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

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

CSS - 使div“可点击”

5 个答案: