如何为元素及其边框设置不同的游标

Question

如何为元素及其边框设置不同的游标？PSEUDO元素？有办法吗？注意:是的,它可以通过JS完成,我正在寻找一种使用单个元素的纯CSS的方法.

Answer 1

这是很多 HTML/CSS 代码，但类似的东西会帮助你：

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

Answer 2

由于该cursor属性会影响元素整个区域(包括边框)中指针的形状(在CSS中奇怪地称为"光标"),因此无法直接执行此操作.

您可以使用JavaScript来确定元素的内容区域,然后修改DOM以便引入内容的其他元素,然后您可以为内部元素和外部元素设置不同的"光标".

但是,在标记中执行此类操作通常更简单,因此您根本不需要JavaScript:

<div id=foo><div id=foo-content>...</div></div>

现在,您可以在两个元素上设置边框#foo并设置cursor它们.设置的"光标" #foo将仅应用于边框.

的jsfiddle

Answer 3

:before并且:after似乎在 Firefox 中允许光标属性，但在 Chrome 中不允许。

您可以在这里看到一个演示：http://jsfiddle.net/ZLZZG/，但实际上，您最好包装元素并为包装器提供光标。

更新：在进行此编辑时（2015 年 4 月 6 日），此功能现已在 Chrome 中运行。