Gibt es pointer:cursor
in 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>
html
css
twitter-bootstrap
bootstrap-4
w411 3
quelle
quelle
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>
quelle
Ab Juni 2020 würde das Hinzufügen
role='button'
zu einem HTML-Tagcursor: "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
quelle
Normalerweise füge ich nur das folgende benutzerdefinierte CSS hinzu, dem W3School-Beispiel, dem vorangestellt ist
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>
quelle
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>
quelle
Ich habe versucht und herausgefunden, dass Sie, wenn Sie eine Klasse namens hinzufügen
btn
, diesehand
oder diesescursor
Symbol 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!
quelle
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>
quelle
Sie können dem Rollenattribut eines beliebigen HTML-Tags / Elements "Schaltfläche" zuweisen, um einen Zeiger darauf zu erstellen. dh
<html-element role="button" />
quelle