Wie werden verschiedene Cursor für ein Element und dessen Rahmen festgelegt? PSEUDO Elemente? gibt es einen Weg ? Hinweis: Ja, es kann über JS getan werden, ich suchte nach einem Weg mit reinem CSS mit einem einzigen Element.So legen Sie verschiedene Cursor für ein Element und seinen Rahmen fest
:before und :after scheinen die Cursor Eigenschaft in Firefox zu erlauben, aber nicht in Chrome.
Hier können Sie eine Demo sehen: http://jsfiddle.net/ZLZZG/, aber Sie werden besser das Element umhüllen und dem Wrapper einen Cursor geben.
Aktualisierung: Zum Zeitpunkt dieser Änderung (6. April 2015) funktioniert dies jetzt in Chrome.
Da sich die Eigenschaft cursor auf die Form des Zeigers (im CSS merkwürdigerweise "Cursor" genannt) im gesamten Bereich des Elements, einschließlich Rahmen, auswirkt, gibt es keinen direkten Weg dazu.
Sie könnten JavaScript verwenden, um den Inhaltsbereich des Elements zu bestimmen und dann das DOM so zu ändern, dass ein zusätzliches Element für den Inhalt eingeführt wird. Anschließend können Sie für das innere Element und das äußere Element einen anderen "Cursor" festlegen.
Es ist jedoch normalerweise einfacher, solche Dinge in Markup zu tun, und Sie werden nicht dann JavaScript brauchen überhaupt für diese:
<div id=foo><div id=foo-content>...</div></div>
Jetzt haben Sie eine Grenze auf #foo einstellen und festlegen cursor auf beide Elemente. Der "Cursor", der auf #foo gesetzt ist, wird dann nur auf den Rand angewendet.
Ja, danke, aber unsere ist eine DOM-intensive App, daher wurde versucht, sie über ein einziges Element ohne Javascript zu erreichen. Ich habe den Titel bearbeitet, um genauer zu sein. – cypher
Es ist ein viel von HTML/CSS-Code, aber so etwas wie das wird Ihnen helfen:
.container {
position: relative;
}
.crop {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
transition: all 0.25s;
cursor: move;
}
.crop .crop-line {
position: absolute;
transition: all 0.25s;
}
.crop:hover .crop-line {
border-color: rgba(123,53,132,1);
}
.crop .crop-top-line {
top: 0;
left: 0;
right: 0;
height: 5px; /* 5px for the mouse cursor update size */
border-top: 1px solid rgba(204,31,48,1); /* 1px for the "border" size */
cursor: n-resize;
}
.crop .crop-bottom-line {
bottom: 0;
left: 0;
right: 0;
height: 5px; /* 5px for the mouse cursor update size */
border-bottom: 1px solid rgba(204,31,48,1); /* 1px for the "border" size */
cursor: s-resize;
}
.crop .crop-left-line {
top: 0;
left: 0;
bottom: 0;
width: 5px; /* 5px for the mouse cursor update size */
border-left: 1px solid rgba(204,31,48,1); /* 1px for the "border" size */
cursor: w-resize;
}
.crop .crop-right-line {
top: 0;
right: 0;
bottom: 0;
width: 5px; /* 5px for the mouse cursor update size */
border-right: 1px solid rgba(204,31,48,1); /* 1px for the "border" size */
cursor: e-resize;
}
.crop .crop-corner {
position: absolute;
width: 6px;
height: 6px;
border-radius: 2px;
border: 1px solid #808080;
background: #FFF;
opacity: 0;
transition: all 0.25s;
}
.crop .crop-top-left-corner {
top: -3px;
left: -3px;
cursor: nw-resize;
}
.crop .crop-top-right-corner {
top: -3px;
right: -3px;
cursor: ne-resize;
}
.crop .crop-bottom-left-corner {
bottom: -3px;
left: -3px;
cursor: sw-resize;
}
.crop .crop-bottom-right-corner {
bottom: -3px;
right: -3px;
cursor: se-resize;
}
.crop:hover .crop-corner {
opacity: 1;
}<div class="container">
<div class="crop">
<div class="crop-line crop-top-line"></div>
<div class="crop-line crop-right-line"></div>
<div class="crop-line crop-bottom-line"></div>
<div class="crop-line crop-left-line"></div>
<div class="crop-corner crop-top-left-corner"></div>
<div class="crop-corner crop-top-right-corner"></div>
<div class="crop-corner crop-bottom-right-corner"></div>
<div class="crop-corner crop-bottom-left-corner"></div>
</div>
</div>
Was ist das "Überschrift" da? Haben Sie die Formatierungswerkzeuge falsch ausgewählt? – BoltClock
Kannst du nicht das Attribut 'cursor' style verwenden? Sie können etwas anderes für Pseudo Selektoren angeben, wie ': Hover' sowie – Ian
So etwas? http://jsfiddle.net/k8GRe/ – Blender