css - 悬停在框的边框上时如何获得 "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/