CSS在div上设置cursor:pointer无效。

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没有按照预期工作。

- Robert

Answer 1

图片（或标签）正在重置光标。以下代码可以正常工作：

图片（或标签）正在重置光标。以下代码可以正常工作：

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

编辑：继承自标签（用户代理样式表）：

label {
    cursor: default;
}

所以这是浏览器的默认设置，可能不是所有浏览器都是如此。但你必须具体说明。

提示：您可以在项目中使用重置CSS（http://meyerweb.com/eric/tools/css/reset/）。这会使浏览器的默认设置带来更少的问题。

顺便说一句：

label {
cursor:inherit;
}

同时解决了问题，也可能更符合您的要求。

- Blackbam

---

图片是如何重置光标的？ - Robert

修改了答案。 - Blackbam

Answer 2

查看这个fiddle

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

您需要将其放在img上，而您忘记在width属性后添加";"

- Vincent G

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/

- Brahim Chougrani