How to set different cursors for an element and it's border ? PSEUDO elements ? is there a way ? Note: Yes it can be done via JS, i was looking for a way using pure CSS with a single element.
4 Answers
It's a lot's of HTML/CSS code, but something like that will help you:
.container {
position: relative;
}
.crop {
position: absolute;
top: 10px;
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>
Since the cursor
property affects the shape of the pointer (oddly called “cursor” in CSS) in the element’s entire area, including border, there is no direct way to do this.
You could use JavaScript to determine the content area of the element and then modify the DOM so that an additional element for the content is introduced, and then you can set different “cursor” for the inner element and the outer element.
However, it is normally simpler to do such things in markup, and you won’t then need JavaScript at all for this:
<div id=foo><div id=foo-content>...</div></div>
Now you can set a border on #foo
and set cursor
on both elements. The “cursor” set on #foo
will then be applied to the border only.
-
Yes, thank you, but ours is a DOM intensive app, hence was looking to achieve it via a single element sans Javascript. i have edited the title to be more specific.– cypherCommented Oct 19, 2012 at 14:00
:before
and :after
seem to allow the cursor property in Firefox, but not in Chrome.
You can see a demo here: http://jsfiddle.net/ZLZZG/, but really you will be better off wrapping the element and giving the wrapper a cursor.
Update: At the time of this edit (6 Apr 2015) this is now working in Chrome.
This is my "simplest" solution to create a table with headers that show the move cursor in the header's right border.
Still 2 objects per cell with border, but close to 1 :-)
.row {
display: table-row;
}
.move {
display: table-cell;
border-right: solid black 1px;
cursor: move;
margin-right: auto;
}
.header {
width: 100px;
cursor: text;
background: #f3f2f1;
border-bottom: solid black 1px;
text-align: center;
}
.cell {
display: table-cell;
cursor: text;
border-bottom: solid black 1px;
border-right: solid black 1px;
text-align: center;
}
.left {
border-left: solid black 1px;
}
.top {
border-top: solid black 1px;
}
<div class="row">
<div class="move">
<div class="header left top">
header 1
</div>
</div>
<div class="move">
<div class="header top">
header 2
</div>
</div>
<div class="move">
<div class="header top">
header 3
</div>
</div>
</div>
<div class="row">
<div class="cell left">
Row 1 Cell 1
</div>
<div class="cell">
Row 1 Cell 2
</div>
<div class="cell">
Row 1 Cell 3
</div>
</div>
<div class="row">
<div class="cell left">
Row 2 Cell 1
</div>
<div class="cell">
Row 2 Cell 2
</div>
<div class="cell">
Row 2 Cell 3
</div>
</div>
cursor
style attribute? You can specify something different for pseudo selectors, like:hover
as well