13

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
  • 2
    What's that "Heading" doing there? Did you misclick the formatting tools?
    – BoltClock
    Commented Oct 19, 2012 at 5:30
  • Can't you use the cursor style attribute? You can specify something different for pseudo selectors, like :hover as well
    – Ian
    Commented Oct 19, 2012 at 5:32
  • 1
    Something like this? jsfiddle.net/k8GRe
    – Blender
    Commented Oct 19, 2012 at 5:36
  • @Blender Make your comment an answer. Commented Oct 19, 2012 at 5:41

4 Answers 4

15

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>

8

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.

jsfiddle

1
  • 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.
    – cypher
    Commented Oct 19, 2012 at 14:00
4

: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.

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.