Question

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

Answer 1

由于cursor属性会影响元素整个区域（包括边框）中指针的形状（在CSS中奇怪地称为“光标”），因此无法直接执行此操作。

您可以使用JavaScript来确定元素的内容区域，然后修改DOM以便引入内容的其他元素，然后您可以为内部元素和外部元素设置不同的“光标”。 / p>

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

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

现在，您可以在#foo上设置边框，并在两个元素上设置cursor。然后，#foo上设置的“光标”将仅应用于边框。

jsfiddle

Answer 2

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

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

Answer 3

:before和:after似乎允许在Firefox中使用游标属性，但不允许在Chrome中使用。

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

更新：在此次修改时（2015年4月6日），此功能现已在Chrome中使用。

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

3 个答案: