我的網頁上有一個類爲「btnNewL1」的按鈕。我的CSS類是如下CSS：懸停時更改按鈕外觀
.btnNewL1
{
background: url(../images/btnbgnew.png);
border:1px solid #818181;
padding-left:3px;
padding-right:3px;
font-family:Arial;
font-size:12px;
padding-top:1px;
padding-bottom:1px;
}
當用戶將鼠標放在按鈕，我想chnage外觀像背景圖片和邊框顏色等chnage的變化......。我想這樣做將CSS本身。它應該被IE6支持IE 7，火狐
如何做到這一點？
不幸：hover僞選擇器不被IE6比<a>任何其它元件上的支持。
如果你希望實現的：hover在IE6中，您可以：
一）如果可能的話，改變你的<input class="btnNewL1" type="button" value="click me!" />到<a class="btnNewL1" href="#">click me!</a>。您需要添加display：block和其他幾個CSS規則。這將使用<a>標籤簡單地「模擬」按鈕。這不是完美的解決方案，因爲有時您必須使用正確的<input>（即使用asp.net控件時）。
B）使用JavaScript，使解決辦法，例如jQuery是：
<script type="text/javascript">
$(document).ready(function(){
$("input.btnNewL1").mouseover(function(){
$(this).toggleClass('buttonSelected');
}).mouseout(function(){
$(this).toggleClass('buttonSelected');
});
});
</script>
<input type="button" value="click me!" class="btnNewL1" />
C）包裝你的代碼這樣的：
<a class="acont" href="#"><input type="button" value="click me!" /></a>
所以，你將能夠使用CSS：
.acont:hover input { background:red; }
這將做這項工作，但據我記得這是無效的HTML（<input>不應該被放置在<a>標籤內）
哪一個你會選擇 - 取決於你。這篇文章的主要觀點是：：懸停僞選擇器只能用於IE6上的錨點元素
.btnNewL1:hover{
background: url(../images/different.png);
}
你想要:hover僞類。使用.btnNewL1:hover { ... }作爲鼠標懸停式樣式。
有關僞類的更多信息，另請參見CSS2 spec。
大多數時間翻轉效果並不重要，我不必擔心IE6兼容解決方案。但是OP確實提到了IE6，我給了你一個解決這個問題的+1。 – 2009-11-16 19:59:34
謝謝史蒂夫。我也這麼認爲，但我們仍應該記住IE6，因爲很多人都在使用它。哦，順便說一句，我編輯我的帖子，所以現在有三種解決方案。 – rochal 2009-11-16 20:00:51