Firefox CSS按鈕圖像光標

因此，我有一個DIV完整的四個HTML按鈕，使用圖像而不是任何文本。使用CSS，我將其設置爲使img與其父親button的寬度相同。在四個按鈕中的三個按鈕上，它們將始終攜帶cursor: pointer屬性，因爲它們始終是可點擊的。然而，第四個按鈕偶爾會處於禁用狀態，所以我必須切換cursor: pointer和cursor: default之間的CSS。Firefox 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的絆腳石。

編輯：作爲參考，我使用Firefox 4.0與Firebug安裝。無論我是否擁有該選項卡上的Firebug，這一行爲都是相同的。 Chrome是最新版本，目前版本爲10.0.648.204。

編輯2：正如我在下面的意見已經表示，我還沒有想出了一個解決這個問題，但在使用@ WDM的回答作爲一個臨時的解決方案解決 - 這樣的Firefox得到cursor: pointer集對於所有按鈕，無論狀態如何，Chrome和IE都將遵循我爲每個button標記中嵌入的img提出的CSS。如果我知道我的代碼中發生了什麼，或者如果有人找到適合Firefox的解決方案，我會在那裏提出答案。再次感謝您的建議！

來源

2011-04-14 Mattygabe

你試過了嗎？

.my-button { 
    cursor: pointer; 
}

編輯：你也可以做一個單獨的類與「光標：指針」，並使用取決於狀態的jQuery的.addClass（）.removeClass（）。或者讓jQuery直接修改css，

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

編輯：一個更多的想法...

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

似乎在所有主流瀏覽器中爲我工作。

來源

2011-04-14 19:11:32 wdm

我已經嘗試過這一點，雖然它可能是我的臨時解決方案（無論Firefox中的狀態如何，都會顯示所有按鈕的「光標：指針」，但在Chrome和IE中可以正常工作），這實際上是將光標樣式應用於父BUTTON元素。如果可能的話，我想嘗試將其應用於兒童，但Firefox可能會阻止這種情況發生。 – Mattygabe 2011-04-14 19:15:20

我會選擇這個作爲正確的答案，因爲它非常接近，但不幸的是它並沒有在Firefox 4中「修復」我的問題 - 只是在可接受的行爲中存在殘段，直到我能夠找出這裏發生的事情 - 無論是Firefox的錯誤或干擾我自己的CSS。我會爲任何人提供這個問題的「正確」解決方案的功勞，或者如果我在我的代碼中發現錯誤，我會更新它。 – Mattygabe 2011-04-14 19:31:13

應該說早些時候是FF4。它現在非常錯誤，我無法忍受使用它。 – wdm 2011-04-14 19:46:34

兩個可能的解決方法：

1 - 使用<input type="image" src="/path/to/my-img1.gif">代替嵌套<img>在<button>

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

來源

2011-04-14 19:11:27 drudge

不幸的是，這些解決方案都不工作： 1 - 不僅改變這個標籤爲'輸入'打破我的佈局由於其他原因（這是否代碼味道在這一點上，對我來說ATM有點不重要），但它也不能修復光標問題。 2 - 與上面相同，佈局保持不變。出於某種原因，Firefox拒絕接受懸停時定義光標的按鈕元素的子元素，但Chrome和IE都樂於接受。 – Mattygabe 2011-04-14 19:20:24

@Mattygabe：''和'button：hover {cursor：pointer; }'在FireFox 3.6.x中都適用於我。我敢打賭你還有其他可能會干擾的CSS。 – drudge 2011-04-14 19:26:45

CSS可能會干擾其他地方。我懷疑從3.6到4.0的變化不會打破這種行爲，但這只是一種預感。有趣。 – Mattygabe 2011-04-14 19:29:22

問題是.disabled是一個類，而不是僞類。它匹配任何<button class="disabled...

如果要選擇每個禁用的按鈕，則必須使用：disabled僞類，該類會自動選擇處於禁用狀態的所有按鈕。

我相信，你的代碼的正確版本將如下所示，雖然我不能在這個時候檢查：http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#UIstates

：

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

僞類是由W3C此處定義他們有一個演示它：http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-24.html

來源

2011-04-14 19:21:22

不幸的是，僞類不起作用，並且實際上破壞了Chrome和IE中默認光標的設置（所以'cursor：pointer'被設置爲與狀態無關，並且Firefox仍然具有'cursor：default'，而不管狀態如何） – Mattygabe 2011-04-14 19:27:38

Firefox CSS按鈕圖像光標

回答

相關問題