a:hover對IE6的兼容，解決圖像鏈接加邊框問題

2024-08-30 08:33:04

字體：大中小

來源：轉載

供稿：網友

假設一個需求：對一個圖像鏈接加邊框，并添加鼠標劃過邊框變色的效果。
　　之前我的實現都是將a標簽block，然后設置相應狀態的高寬和border，我也刨別人代碼看過，多數都是這樣實現的。試想一下如果使用精準的選擇器能否控制圖片的邊框來達到我們要的效果了？如果能實現，那么我們的a標簽就不需要設置額外的樣式了。
　　首先做了個測試，具體代碼如下：

<style>
a img{
padding:1px;
}
a.user img{
border:3px solid #efefef;
}
a.user:hover img{border:3px solid #999;}
</style>
<body>
<a class="user" href="#">
<img src="test.jpg"/>
</a>
</body>

　　很幸運，上面的代碼在FF下已經達到了我們的功能需求，但不要高興太早，在IE6下當鼠標劃過時，圖像的邊框并沒有按照我們想的變色。原因就是因為IE對hover這個偽類的不支持。在google上找了下發現了一個很容易的hack方法，并由此可輕易擴充到更多樣的需求，例如在下面這個測試中我額外給img鏈接增添了一個tip。

　　代碼的具體實現可查看源代碼，下面只是重點指出hack的方法：
a.user img{ border:3px solid #efefef; } a.user:hover{zoom:1;} a.user:hover img{border:3px solid #999;}
　　如果我把上面的zoom:1;換成了border:none，你可能就不是這么容易發現這句hack了，你會認為這是一個多余的CSS定義，而恰恰相反，只要我們增加這么一句定義，而里面的屬性只要跟下面一句定義不相同即可實現IE6下的兼容，是不是很簡單。
　　
　　這樣寫下來代碼也簡潔多了，更重要的是邊框的樣式可以根據圖的大小自適應了。