悬停在框的边框上时如何获得 "resize" 类型的光标？

Question

我正在尝试将光标属性从 :default 更改为 :se-resize，当鼠标悬停在方框 的边框 上时仅。有什么办法可以在 CSS 中做到这一点吗？我需要仅 CSS 中的选项！

HTML:

<textarea placeholder="..."></textarea>

CSS:

textarea {
width: 510px;
height: 140px;
padding: 5px 0;
border:2px solid #dddddd;
outline-style:none;
color: #777777;

}

Answer 1

在这里，尝试使用具有 CSS 悬停的包装 DIV。

.border {
  background-color: red;
  cursor: e-resize;
  padding: 5px;
}

.contents {
  background-color: white;
  cursor: default;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

<div class="border">
<div class="contents">
  Hello World
</div>
</div>

也在这里：https://jsfiddle.net/vyk4c21b/9/

悬停在框的边框上时如何获得 "resize" 类型的光标？

How to get "resize" type of cursor when hovering on the border of the box?

css

mouse-cursor