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(用户代理样式表):

label {
    cursor: default;
}

所以这是浏览器默认值.也许不在任何浏览器中.但是你必须具体.

Tipp:您可以在项目中使用重置CSS(http://meyerweb.com/eric/tools/css/reset/).这会减少浏览器默认设置的痛苦.

顺便说一下

label {
cursor:inherit;
}

也解决了问题,也许更多你想要的.