Come impostare cursori diversi per un elemento e il suo bordo? elementi PSEUDO? c'è un modo? Nota: Sì, può essere fatto tramite JS, stavo cercando un modo usando puro CSS con un singolo elemento.Come impostare cursori diversi per un elemento e il suo bordo
:before e :after sembrano consentire al cursore proprietà in Firefox, ma non in Chrome.
È possibile vedere una demo qui: http://jsfiddle.net/ZLZZG/, ma in realtà sarà meglio avvolgere l'elemento e dare al cursore un cursore.
Aggiornamento: Al momento di questa modifica (6 aprile 2015), questo funziona ora in Chrome.
Poiché la proprietà cursor influisce sulla forma del puntatore (stranamente chiamata "cursore" in CSS) nell'intera area dell'elemento, incluso il bordo, non esiste un modo diretto per farlo.
È possibile utilizzare JavaScript per determinare l'area del contenuto dell'elemento e quindi modificare il DOM in modo che venga introdotto un elemento aggiuntivo per il contenuto, quindi è possibile impostare "cursore" diverso per l'elemento interno e l'elemento esterno.
Tuttavia, è di solito più semplice per fare queste cose nel markup, e non sarà quindi necessario JavaScript a tutti per questo:
<div id=foo><div id=foo-content>...</div></div>
Ora è possibile impostare un bordo su #foo e impostare cursor su entrambi elementi. Il "cursore" impostato su #foo verrà quindi applicato solo al bordo.
Sì, grazie, ma la nostra è un'app DOM intensiva, quindi cercava di ottenerla tramite un singolo elemento sans Javascript. ho modificato il titolo per essere più specifico. – cypher
E 'di di HTML/CSS, ma qualcosa di molto simile che vi aiuterà a:
.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>
cosa è che "la rubrica" fare lì? Hai sbagliato gli strumenti di formattazione? – BoltClock
Non puoi usare l'attributo di stile 'cursor'? Puoi specificare qualcosa di diverso per gli pseudo selettori, come ': hover' pure – Ian
Qualcosa di simile? http://jsfiddle.net/k8GRe/ – Blender