resizeプロパティアイコンとカーソルをホバー上で変更する方法

Question

次のdivの右下にあるリサイズアイコンを変更したい（下記のコードスニペットを参照）。ホバー上のカーソルも変更したい

#resizableDiv::-webkit-resizer { 
cursor:e-resize; 
background-image: url(some_image.png); 
} 

が、無駄で、どのように私はすべての後にそれが可能である、ことを達成することができます。例えば、カーソルを電子リサイズする）

私が追加しようとしましたか？

#resizableDiv { 
 
overflow:auto; 
 
border:1px; 
 
height:100px; 
 
width:200px; 
 
resize:horizontal; 
 
display:inline-block; 
 
background-color:yellow; 
 
}

<div id="resizableDiv"> 
 
Resizable div for a single user working with Chrome 
 
</div>

Answer 1

別々にネストされた要素内のアイコン要素の使用を検討してください。
疑似要素の助けを借りれば、以下のコードスニペットが示すように、意図した動作を達成することができます。

コードスニペットデモンストレーション：

#resizableDiv { 
 
    overflow:auto; 
 
    border:1px; 
 
    height:100px; 
 
    width:200px; 
 
    resize:horizontal; 
 
    display:inline-block; 
 
    background-color:yellow; 
 
    position: relative; /* required */ 
 
} 
 

 
/* Additional */ 
 

 
div#resizableDiv:after { 
 
    content: ""; 
 
    resize: horizontal; 
 
    bottom: 0; 
 
    right: 0; 
 
    cursor: e-resize; 
 
    position: absolute; 
 
    z-index: 9; 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 

 
.resizeUI { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    background: inherit; 
 
    padding: 0px 3px; 
 
    pointer-events: none; 
 
    cursor: e-resize; 
 
}

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css"> 
 
<div id="resizableDiv"> 
 
Resizable div for a single user working with Chrome 
 
<div class="resizeUI"><i class="fa fa-arrows-h"></i></div> 
 
</div>