12

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

4

3 回答 3

9

它有很多 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>

于 2016-10-02T02:58:49.583 回答
5

由于该cursor属性会影响元素整个区域（包括边框）中指针（在 CSS 中奇怪地称为“光标”）的形状，因此没有直接的方法可以做到这一点。

您可以使用 JavaScript 确定元素的内容区域，然后修改 DOM 以便为内容引入一个附加元素，然后您可以为内部元素和外部元素设置不同的“光标”。

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

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

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

jsfiddle

于 2012-10-19T05:59:05.643 回答
4

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

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

更新：在此编辑时（2015 年 4 月 6 日），它现在在 Chrome 中工作。

于 2012-10-19T05:54:24.573 回答