divのCSSカーソルポインタが機能しない

Question

divのカーソルタイプを変更したいのに機能しません。

HTML：

<div class='upload-wrapper'> 
 
    <label for='file-input'> 
 
    <img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'> 
 
    </label> 
 
    <input type='file' name='photo' id='file-input'> 
 
</div>

CSS：

.upload-wrapper { 
    width: 250px; 
    height: 250px; 
    margin: 0 auto; 
    cursor: pointer; 
} 

.upload-wrapper img { 
    width: 250px 
    height: 280px; 
} 

.upload-wrapper input { 
    display: none; 
} 

結果：https://jsfiddle.net/m7tctnvh/

事前にお答えいただきありがとうございますが、CSSが期待どおりに動作しない理由を知りたい場合もあります。

Answer 1

イメージ（またはラベルタグ）がカーソルをリセットしています。以下の作品：

.upload-wrapper img { 
    width: 250px 
    height: 280px; 
    cursor:pointer; 
} 

編集：ラベル（ユーザーエージェントスタイルシート）から継承されています：

label { 
    cursor: default; 
} 

は、これは、ブラウザのデフォルトです。おそらく、どのブラウザでもない。しかし、あなたは具体的でなければなりません。

Tipp：プロジェクトでリセットCSSを使用することができます（http://meyerweb.com/eric/tools/css/reset/）。これにより、ブラウザのデフォルトでは痛みが大幅に軽減されます。

そしてバイウェイ

label { 
cursor:inherit; 
} 

も、問題を解決し、多分より多くのあなたが望むものです。

Answer 2

See this fiddle

.upload-wrapper img { 
    width: 250px; 
    cursor:pointer; 
} 

あなたはIMGの上に配置する必要があり、あなたが追加することを忘れ ";" widthプロパティ後

Answer 3

あなたは.upload-wrapper img で;を置くことを忘れて、画像の上にマウスを移動するとき、あなたのコードは次のようになりますので、あなたはカーソルを置く必要があります。

.upload-wrapper { 
    width: 250px; 
    height: 250px; 
    margin: 0 auto; 
} 

.upload-wrapper img { 
    width: 250px; 
    height: 280px; 
    cursor: pointer; 
} 

.upload-wrapper input { 
    display: none; 
} 

https://jsfiddle.net/84rgb45o/