我想知道如何呈现一个可点击的div (就像一个链接,当我用鼠标移动时,用小手)。
我有一些这样的元素:
<div class="teamSelector">Some</div>
使用此jQuery:
$('.teamSelector').click(function() {
// some functions
});
干杯
发布于 2010-12-15 01:36:50
您已经在示例中将其设置为可点击。如果你想让它“看起来”可点击,你可以添加一些CSS:
.teamSelector { cursor: pointer; }
或者继续使用jQuery:
.click(function() { do something }).css("cursor", "pointer");
Here is游标属性的W3学校参考。
发布于 2010-12-15 01:38:55
它的css是:
.teamSelector
{
cursor: pointer
}
你也可以添加悬停效果,但我不确定:active是否能跨浏览器工作。
如果您需要一些可单击的内容,最好使用button
或a
元素并对其进行样式设置。您总是可以使用javascript阻止默认操作。它更好的原因是为了便于访问,这样屏幕阅读器的用户就知道有一些东西可以与之交互。
click
to add:当你用tab键浏览一个页面时,你可以点击空格键来添加一个元素。这在非交互式元素上不会起到同样的作用,所以使用该功能的任何人都不能使用您正在制作的任何东西。
发布于 2017-01-08 19:28:27
这个问题很老了,但还需要补充一下:
如果您希望使用基于指针用户交互来包装组件,则应该首选block
元素而不是div
(您仍然可以将其显示为button )。
<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
}
https://stackoverflow.com/questions/4442217
复制相似问题