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

:beforeFirefoxではカーソル:afterプロパティを許可しているようですが、 Chromeでは許可していません。

http://jsfiddle.net/ZLZZG/でデモを見ることができますが、実際には、要素をラップしてラッパーにカーソルを与える方がよいでしょう。

更新:この編集の時点 (2015 年 4 月 6 日) では、これは Chrome で動作するようになりました。

于 2012-10-19T05:54:24.573 に答える