指针游标的 CSS 类

小开

引导程序4稳定更新

cursor: pointer;规则已经恢复，所以按钮现在默认将光标悬停:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-success">Sample Button</button>

不，没有。您需要为此制作一些自定义 CSS。

如果你只是需要一个看起来像一个按钮(带指针)的链接，使用这个:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<a class="btn btn-success" href="#" role="button">Sample Button</a>

小开

不幸的是，目前 Bootstrap 中还没有这样的类(2019年1月27日)。

我浏览了引导程序代码，发现了以下使用 光标: 指针的类。似乎不应该将它们中的任何一个专门用于游标: 指针。

summary {
display: list-item;
cursor: pointer;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
.custom-range::-webkit-slider-runnable-track {
width: 100%;
height: 0.5rem;
color: transparent;
cursor: pointer;
background-color: #dee2e6;
border-color: transparent;
border-radius: 1rem;
}
.custom-range::-moz-range-track {
width: 100%;
height: 0.5rem;
color: transparent;
cursor: pointer;
background-color: #dee2e6;
border-color: transparent;
border-radius: 1rem;
}
.custom-range::-ms-track {
width: 100%;
height: 0.5rem;
color: transparent;
cursor: pointer;
background-color: transparent;
border-color: transparent;
border-width: 0.5rem;
}
.navbar-toggler:not(:disabled):not(.disabled) {
cursor: pointer;
}
.page-link:not(:disabled):not(.disabled) {
cursor: pointer;
}
.close:not(:disabled):not(.disabled) {
cursor: pointer;
}
.carousel-indicators li {
box-sizing: content-box;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 30px;
height: 3px;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: .5;
transition: opacity 0.6s ease;
}

唯一显而易见的解决办法:

我建议你只是在你常用的 css 中创建一个类 cursor-pointer。现在看起来简单又优雅。

.cursor-pointer{
cursor: pointer;
}

<div class="cursor-pointer">Hover on  me</div>

小开

我尝试并发现，如果你添加一个类称为 btn，你可以得到该 hand或 cursor图标，如果你鼠标悬停在该元素。试试看。

例如:

<span class="btn">Hovering over must have mouse cursor set to hand or pointer!</span>

干杯！

小开

我通常只是添加以下自定义的 CSS，W3School 的例子与 cursor-前面

.cursor-alias {cursor: alias;}
.cursor-all-scroll {cursor: all-scroll;}
.cursor-auto {cursor: auto;}
.cursor-cell {cursor: cell;}
.cursor-context-menu {cursor: context-menu;}
.cursor-col-resize {cursor: col-resize;}
.cursor-copy {cursor: copy;}
.cursor-crosshair {cursor: crosshair;}
.cursor-default {cursor: default;}
.cursor-e-resize {cursor: e-resize;}
.cursor-ew-resize {cursor: ew-resize;}
.cursor-grab {cursor: -webkit-grab; cursor: grab;}
.cursor-grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.cursor-help {cursor: help;}
.cursor-move {cursor: move;}
.cursor-n-resize {cursor: n-resize;}
.cursor-ne-resize {cursor: ne-resize;}
.cursor-nesw-resize {cursor: nesw-resize;}
.cursor-ns-resize {cursor: ns-resize;}
.cursor-nw-resize {cursor: nw-resize;}
.cursor-nwse-resize {cursor: nwse-resize;}
.cursor-no-drop {cursor: no-drop;}
.cursor-none {cursor: none;}
.cursor-not-allowed {cursor: not-allowed;}
.cursor-pointer {cursor: pointer;}
.cursor-progress {cursor: progress;}
.cursor-row-resize {cursor: row-resize;}
.cursor-s-resize {cursor: s-resize;}
.cursor-se-resize {cursor: se-resize;}
.cursor-sw-resize {cursor: sw-resize;}
.cursor-text {cursor: text;}
.cursor-w-resize {cursor: w-resize;}
.cursor-wait {cursor: wait;}
.cursor-zoom-in {cursor: zoom-in;}
.cursor-zoom-out {cursor: zoom-out;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-success cursor-pointer">Sample Button</button>

小开

引导3-只是添加“ 没错”类为我工作。

没有指针光标:

<span class="label label-success">text</span>

使用指针光标:

<span class="label label-success btn">text</span>

小开

最佳答案

从2020年6月开始，将 role='button'添加到任何 HTML 标记中都会将 cursor: "pointer"添加到元素样式中。

<span role="button">Non-button element button</span>

关于这一特性的正式讨论 -https://github.com/twbs/bootstrap/issues/23709

文档链接 -https://getbootstrap.com/docs/4.5/content/reboot/#pointers-on-buttons

小开

我没有足够的声誉来评论相关的答案，但是对于阅读这篇文章的人来说。Btn 不仅添加了指针光标，还添加了很多其他的造型。如果它是一个按钮，你想要引导按钮样式，这是很好的，但在其他情况下，它会搞砸了很多其他元素。

你能做的最好的事情，就像哈里 · 达斯建议的那样，也是我经常做的，就是添加以下 css:

.cursor-pointer {
cursor: pointer;
}

之后可以将其添加到任何元素

<div class="cursor-pointer"> .. </div>

小开

您可以将“按钮”赋给任何 html 标记/元素的 role 属性，使指针指向它。也就是说

<html-element role="button" />

小开

没有这样的类，但是您可以为 div 或其他元素添加内联样式比如,

<div class="" style="cursor: pointer;">

小开

不知道什么时候添加，但根据其文件有 btn-link

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<title>Hello, world!</title>
</head>
<body>
<button type="button" class="btn btn-link">Click Me, Hover Me Link</button>
<body>
</html>

林克

Https://getbootstrap.com/docs/4.0/components/buttons/

Btn-link

小开

尝试使用 type = Button <span type="button">Hover me</span>