Bootstrap v4 + CSS-Klasse für Zeigercursor

77

Gibt es pointer:cursorin Bootstrap 4 eine CSS-Klasse oder ein CSS-Attribut speziell für Schaltflächen oder Links?

<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">Sample Button</button>

w411 3
quelle

Antworten:

53

UPDATE für Bootstrap 4 stabil

Die cursor: pointer;Regel wurde wiederhergestellt, sodass bei Schaltflächen der Cursor jetzt standardmäßig den Mauszeiger zeigt:

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


Nein, gibt es nicht. Sie müssen hierfür ein benutzerdefiniertes CSS erstellen.

Wenn Sie nur einen Link benötigen, der wie eine Schaltfläche aussieht (mit Zeiger), verwenden Sie Folgendes:

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

Klooven
quelle
1
das ist besser, danke ... hier ist href = "#" notwendig .. aber kein Problem .. funktioniert .. danke
w411 3
Ich habe den Effekt durch einfaches Hinzufügen von: role = "button" erreicht ... Keine Notwendigkeit für die BTN-Klasse.
Matt Wohler
Zu Ihrer Information : Der deaktivierte Status ist für Schaltflächen unterbrochen (hat Zeiger), funktioniert jedoch für Links (kein Zeiger): Getestet unter getbootstrap.com/docs/4.4/components/buttons in FF76 und dasselbe Verhalten in meiner App mit Webjars 4.4.1-1
Derek White
53

Leider gibt es derzeit keine solche Klasse in Bootstrap (27. Januar 2019).

Ich habe den Bootstrap-Code durchsucht und folgende Klassen entdeckt, die den Cursor verwenden: Zeiger . Es scheint keine gute Idee zu sein, eine davon speziell für cursor: pointer zu verwenden.

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

Die einzige offensichtliche Lösung:

Ich würde Ihnen nur vorschlagen, eine Klasse in Ihrem gemeinsamen CSS als zu erstellen cursor-pointer. Das ist ab sofort einfach und elegant.

.cursor-pointer{
  cursor: pointer;
}
<div class="cursor-pointer">Hover on  me</div>

Hari Das
quelle
26

Ab Juni 2020 würde das Hinzufügen role='button'zu einem HTML-Tag cursor: "pointer"das Element-Styling erweitern.

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

Offizielle Diskussion zu dieser Funktion - https://github.com/twbs/bootstrap/issues/23709

Dokumentationslink - https://getbootstrap.com/docs/4.5/content/reboot/#pointers-on-buttons

Vibhor Dube
quelle
2
Beachten Sie, dass dies zwar funktionieren kann, Sie es jedoch nur verwenden sollten, wenn die Rolle des Elements eine Schaltfläche ist.
Enrico
21

Normalerweise füge ich nur das folgende benutzerdefinierte CSS hinzu, dem W3School-Beispiel, dem vorangestellt istcursor-

.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>

Alexis Paques
quelle
7

Ich habe nicht genug Ruf, um die relevanten Antworten zu kommentieren, aber für Leute, die dies lesen. Durch Hinzufügen von .btn wird nicht nur der Zeigercursor hinzugefügt, sondern es werden auch viele andere Stile hinzugefügt . Was großartig ist, wenn es sich um eine Schaltfläche handelt und Sie das Styling der Bootstap-Schaltfläche wünschen, aber in anderen Fällen würde dies andere Elemente stark durcheinander bringen.

Das Beste, was Sie tun können, wie Hari Das vorgeschlagen hat und was ich auch immer tue, ist, das folgende CSS hinzuzufügen:

.cursor-pointer {
  cursor: pointer;
}

Danach können Sie es zu jedem Element hinzufügen

<div class="cursor-pointer"> .. </div>
Rick
quelle
Bootstrap 4.3 hat dieses Problem bereits behoben. getbootstrap.com/docs/4.3/components/buttons/#examples
w411 3
3

Ich habe versucht und herausgefunden, dass Sie, wenn Sie eine Klasse namens hinzufügen btn, diese handoder dieses cursorSymbol erhalten können, wenn Sie mit der Maus über dieses Element fahren. Versuchen Sie es und sehen Sie.

Beispiel:

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

Prost!

Coder Amogh
quelle
3

Bootstrap 3 - Nur das Hinzufügen der " btn " -Klasse hat bei mir funktioniert.

Ohne Zeigercursor:

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

Mit Zeigercursor:

<span class="label label-success btn">text</span>
Stnfordly
quelle
Dies ist die schlimmste Problemumgehung, die ich im Zusammenhang mit Bootstrap gesehen habe.
Vibhor Dube
0

Sie können dem Rollenattribut eines beliebigen HTML-Tags / Elements "Schaltfläche" zuweisen, um einen Zeiger darauf zu erstellen. dh

<html-element role="button" />
Afzal Ali
quelle