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>Antworten:
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>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>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
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>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>
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!
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>