Question

所以，我有一个DIV，里面有四个HTML按钮，它们使用图像而不是任何文本。使用CSS，我对其进行样式设置，使img与其父button的宽度相同。在四个按钮中的三个按钮上，它们将始终带有cursor: pointer属性，因为它们始终是可点击的。但是，第四个按钮有时会处于禁用状态，因此我必须在cursor: pointer和cursor: default之间切换CSS。

正如我的代码所示，这在Chrome和IE 7/8/9中正常运行（6不在我支持的受众群体中），但Firefox不会将cursor从默认值更改为任何一个，无论是否其中一个按钮被禁用。请注意，虽然当我将cursor属性应用于父BUTTON元素时，这确实有效，但我更喜欢使用CSS来更改光标而不是使用任何客户端Javascript。因为这适用于我正在测试的三种现代浏览器中的两种（包括IE7，请注意！），我认为它也应该可以在FF中使用。

这是我的HTML标记：

<button id="btn1" class="my-button"><img src="/path/to/my-img1.gif" alt="Img1" /></button>
<button id="btn2" class="my-button"><img src="/path/to/my-img2.gif" alt="Img2" /></button>
<button id="btn3" class="my-button"><img src="/path/to/my-img3.gif" alt="Img3" /></button>
<button id="btn4" class="my-button"><img src="/path/to/my-img4.gif" alt="Img4" /></button>

以下是我为此标记指定的CSS类：

<style>
    .my-button {
    display: block;
    float: left;
    margin: 0px;
    padding: 0px;
    vertical-align: top;
    border: none;
    background: none;
    }

    .my-button img {
    cursor: pointer;
    }

    .my-button img .disabled {
    cursor: default;
    }
</style>

对于那些有任何讨厌的好奇心的人来说，所有点击事件和动作都是用jQuery处理的，这取决于我需要使用它和周围页面的任何业务逻辑。

如果我能提供更多信息，请告诉我。我觉得我在这里碰到了一个Firefox绊脚石。

编辑：作为参考，我使用安装了Firebug的Firefox 4.0。无论我是否为该选项卡打开Firebug，都会出现相同的行为。 Chrome是最新的，目前版本为10.0.648.204。

编辑2：正如我在下面的评论中指出的那样，我仍然没有找到解决这个问题的方法，但已经决定使用@ wdm的答案作为临时解决方案 - 这种方式无论状态如何，Firefox都会为所有按钮设置cursor: pointer，Chrome和IE将遵循我在每个img标记中为嵌入式button提供的CSS。如果我发现我的代码中发生了什么，或者其他人找到了适合Firefox的解决方案，我会在那里提出答案。再次感谢您的建议！

Answer 1

两种可能的修复方法：

1 - 使用<input type="image" src="/path/to/my-img1.gif">而不是在<img>

中嵌套<button>

2 - 使用.mybutton:hover { cursor: pointer; }作为CSS。

Answer 2

你试过吗？

.my-button {
    cursor: pointer;
}

编辑：你也可以用“cursor：pointer”创建一个单独的类，并根据状态使用jQuery的.addClass（）。removeClass（）。或者让jQuery用

直接改变css

.css("cursor", "pointer");

编辑：还有一个想法......

button {
    cursor: pointer;
}
button:disabled {
    cursor: default;
}

似乎在所有主流浏览器中都适合我。

Answer 3

问题是.disabled是一个类，而不是伪类。它匹配任何<button class="disabled...

如果要选择每个禁用按钮，则必须使用：disabled伪类，它会自动选择处于禁用状态的所有按钮。

我相信您的代码的正确版本如下，但我目前无法检查：

.my-button :disabled img {
    cursor: default;
}

伪类由w3c定义：http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#UIstates

他们有一个演示：http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-24.html

按钮图像上的Firefox CSS光标

3 个答案: