CSS -使div“可点击”
CSS -使div“可点击”
提问于 2010-12-15 01:34:59
我想知道如何呈现一个可点击的div (就像一个链接，当我用鼠标移动时，用小手)。
我有一些这样的元素：
<div class="teamSelector">Some</div>使用此jQuery：
$('.teamSelector').click(function() {
// some functions
});干杯
回答 5
Stack Overflow用户
回答已采纳
发布于 2010-12-15 01:36:50
您已经在示例中将其设置为可点击。如果你想让它“看起来”可点击，你可以添加一些CSS：
.teamSelector { cursor: pointer; }或者继续使用jQuery：
.click(function() { do something }).css("cursor", "pointer");Here is游标属性的W3学校参考。
Stack Overflow用户
发布于 2010-12-15 01:38:55
它的css是：
.teamSelector
{
cursor: pointer
}你也可以添加悬停效果，但我不确定:active是否能跨浏览器工作。
如果您需要一些可单击的内容，最好使用button或a元素并对其进行样式设置。您总是可以使用javascript阻止默认操作。它更好的原因是为了便于访问，这样屏幕阅读器的用户就知道有一些东西可以与之交互。
click to add:当你用tab键浏览一个页面时，你可以点击空格键来添加一个元素。这在非交互式元素上不会起到同样的作用，所以使用该功能的任何人都不能使用您正在制作的任何东西。
Stack Overflow用户
发布于 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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4442217
复制相关文章
相似问题