Question

我想更改div上的光标类型，但它不起作用。

HTML：

＆＃13;

<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>

＆＃13;

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;
}

也解决了这个问题，也许更符合你的需求。

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/

div上的CSS游标指针不起作用

3 个答案: