CSS中的基础题目： cursor是啥功能；其属性hand表示啥？相应的它还有其他属性吗？谢谢

Posted 2023-04-15

cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )

auto :　 默认值。浏览器根据当前情况自动确定鼠标光标类型。
all-scroll :　 IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
col-resize :　 IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
crosshair :　 简单的十字线光标。
default :　 客户端平台的默认光标。通常是一个箭头。
hand :　 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
move :　 十字箭头光标。用于标示对象可被移动。
help :　 带有问号标记的箭头。用于标示有帮助信息存在。
no-drop :　 IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
not-allowed :　 IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
pointer :　 IE6.0 和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
progress :　 IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
row-resize :　 IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
text :　 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
vertical-text :　 IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
wait :　 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
*-resize :　 用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
url ( url ) :　 IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。 参考技术A cursor表示当鼠标移到指定标签上的时候显示的鼠标指针的样式.
hand是默认的,样式是一只手...

cursor:pointer 属性不适用于 Webkit 浏览器中的文件上传按钮

【中文标题】cursor:pointer 属性不适用于 Webkit 浏览器中的文件上传按钮

【英文标题】：The cursor:pointer property doesn't apply to file upload buttons in Webkit browsers

【发布时间】：2011-11-25 04:08:37

【问题描述】：

我的 CSS 代码在 safari 和 chrome 等 webkit 浏览器上无法正常工作

如果你想要现场例子，这里是http://jsfiddle.net/mnjKX/1/

我有这个 CSS 代码

.file-wrapper 
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;

.file-wrapper input 
    cursor: pointer;
    font-size: 100px;
    height: 100%;
    filter: alpha(opacity=1);
    -moz-opacity: 0.01;
    opacity: 0.01;
    position: absolute;
    right: 0;
    top: 0;

.file-wrapper .button 
    background: #79130e;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    margin-right: 5px;
    padding: 4px 18px;
    text-transform: uppercase;

还有这个 HTML 代码：

<span class="file-wrapper">
   <input type="file" name="photo" id="photo" />
   <span class="button">Choose a Photo</span>
</span>

此代码显示隐藏的输入文件标签， 这里的问题是 cursor:pointer 在 webkit 浏览器上不起作用，

我怎样才能解决它或绕过/超越它？

【问题讨论】：

cursor:pointer 在这里工作正常。

@Quentin：不适合我。我查看了 Chrome 14 上的小提琴，没​​有任何地方显示指针光标。

Chrome 似乎没有将cursor:pointer 规则应用于<input type="file"> 元素：jsfiddle.net/mnjKX/8

@Šime Vidas — 确实如此，但默认值不是inherit，因此您必须明确设置输入指针的样式……但它仅适用于文本字段部分而不是按钮部分。

我猜我的 Chrome 版本已经损坏。

【参考方案1】：

首先，如果您从 input 规则中删除 height 声明，它可以在 Chrome 中使用。

现场演示： http://jsfiddle.net/mnjKX/16/

但是这个透明的输入字段是一个非常糟糕的黑客......我不会依赖它。

---

更新：

这是正确的解决方案：

::-webkit-file-upload-button  cursor:pointer; 

我认为文件上传按钮无法访问，但 Chrome 的用户代理样式表证明我错了:)

【讨论】：

@Mor 这太老套了。我不认为我的答案是一个完整的解决方案。

很好，你也可以用-webkit-rtl-ordering:left; 反转按钮；

您在其他浏览器中无法访问该按钮。因此，适当的解决方案实际上是不够适当的。尽管为骇人听闻的解决方案+1。这可能是最好的黑客了。

@user732456 这个问题专门针对 Webkit 浏览器。我没有为其他浏览器寻找解决方案。其他浏览器可能存在类似的解决方案。

酷 ::-webkit-file-upload-button cursor:pointer; 解决了我的问题

【参考方案2】：

我想出了一个有趣的（跨浏览器）解决方案：

为输入提供 cursor:pointer 的 CSS 属性，将输入放置在 div 中（带有溢出：隐藏），并为输入提供 100% 的左填充。填充区域将具有指针属性。

我个人不信任 -webkit 和 -moz 修复，因为我觉得它们是任意的和临时的，并且很快就会被替换。

【讨论】：

非常好的解决方案。我碰巧将我的输入包装成自己的形式，所以这就像一个魅力，不需要额外的 div :)

聪明。我总是对这种无缘无故突然改变的细微差别感到超级偏执

【参考方案3】：

input[type='file']
    opacity: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    font-size: 0;
    position: absolute;


<input type="file">
<img   title=""  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADs0lEQVR42rWVa2iOYRjH9+zd+dw2oWaGwkjzRY5flDC1nBaxsTnVYkaWc8oHoZalETWHsVGkZo0yIyEmGzkWpZhDbBhmxE7v63fp/0j7YGq89e/+XfdzuJ7/dV/3/Tp+//nndHdD2o4RIQHBnilgIPL3+XytjuO0MkZ4O3zllevve3uUYMaulDxeePL0mruNXeaTmJ/IfMlfJZhekBLv+PuNBEPRq8427wN/jxPmeJxM4seoAH0yF+g9WonmVOTfK+o2weTNyZ6w2KC9fNFuQtz7AuF0+DV8Ft4GZ6OvxPXE7xlLGZ8wF4CLK39MMLNwZDoPJPPAHcJwOAiOhp/Ct+Ba3d9J/I3YEjUzTmNuNuwHd8DtcAg8FK4ica2jeuYyFKM4cyB1aGEz0BoUYw6QLWoEakLLUY25UOl+foSubaB8O1wHmWS+R+YadUojbEmi4WjYo4Rv5SCWMdic2LzYEjfBAXAynImDI78nqOXCWcIk2KsHgmB/+ARs6/BE8UDGuYw5KmkbfA5O1QckwfNJUOqWaCnDdVRuL5WsXO1oobrIXpYgJ9W6N9VKgdZRjmreUwqPReYgg7mjroMlZL5K5v2E8XA/2JKshc9okfui78QNxLaYdxgteQkcCVfCW+HX8LiuDqwFr6Ey1B/1Rm/QMJSP8lCkus4cNNheQbt032G5s4+qR8PRIhwccB1kk/kmmSsIB8GdcDVfkEbyU/B45ntZt3Ctg9icfGQ8zdwW+AY8WG36UA7m8XyZm2CxbrqkElmC2/AE+DKcCMeaC/W8nUUtWthVcJ0WtlXNMhmeS4LjXbvoolmF22ErwSh4BTzTuguFaRPadm9iXG0NAFfA1hQvtEaT4CwSHHLXYBHDLWQJ4lXnp2ifuuUYStRC2zPB6LwdYagQzdImeydNtaOFNTjoOsiSTXuot3q9BW6Bc+E62Hb7EOJQ4irGYsY5zO2E4+FmrYE5GA0vsJPWTbBMtbZWG6AyeJXgkxbTDsKXWoPBKp3tn2DY0c5vhp/BY7TIv9p0idrUNlAfnS3uUW6J3uqsaZM8OnPsQAyRfLr3g1rd2rTYdZAjB0WyGadzphHuBQfqhd+I39jX6p5OObCjIspaWQ7NQQ4OitwEm7hQRMYvfv/gx/vM2UIS7HFLtFG7tUUd1C67Udqdn63HVYpoufmuebtuR/kXlS9cu3w7H3zBTWB/laOxlqDNlABbu37VUWw9bn+lIdrBnxljbMPpno/6w7Hj/B383E4GEjzq9k+/p78fan0xNyGwEGgAAAAASUVORK5CYII=" />

cursor:pointer 在输入文件上不起作用，只是因为默认按钮。这里没有什么特别的原因。您需要通过此代码删除它的外观，注意字体大小：0。

对我来说，它可以在 Chrome、Firefox 和 IE 上完美运行。希望对你也有帮助。