CSS - 使div"可点击"

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");

这是 W3学校对游标属性的引用.

Answer 2

它的CSS是：

.teamSelector
{
  cursor: pointer
}

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

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

编辑添加：在页面上浏览时，您可以按下空格键找到click一个元素。这在非交互式元素上将无法正常工作，因此使用该功能的任何人将无法使用您正在制作的内容。