※ 引述《sniperliao (我+老婆=幸福)》之銘言:
: 各位前輩
: 小弟想請教一個CSS的問題
: 若已先 @import 一組CSS (強制的)
: 其中有一段描述會把 圖片滑鼠hover時,圖片變大
: .abc a:hover {
: width:100px;
: height:100px;
: position:absolute;
: top:4px; left:4px;
: }
: 但是我想把他還原
: 所以我重新再寫了一次
: .abc a:hover {
: /* width:100px;
: height:100px; */
: position:absolute;
: top:4px; left:4px;
: }
: 可是很顯然的,我這樣還是會被繼承100px屬性
: 而每張圖的原始屬性(長寬都不同),所以也不能重寫固定值
: 那這樣我應該怎麼重新把width跟height設定為"不設定"呢?
: 懇請賜教! 感恩!
<div class="abc">
<a href="#"><img src="test.jpg" alt="test"></a>
</div>
.abc a img{
width:100px;
width:expression(this.width=100?100:true);
height:100px;
height:expression(this.height=100?100:true);
}
.abc a:hover img{
width:auto;
width:expression("auto");
height:auto;
height:expression("auto");
}
奇怪的是,這種寫法在absolute屬性下滑鼠移開後圖縮不回來
所以必須把position:absolute;拿掉
這樣勢必對排版上有影響,所以下面提供另外一種解法做參考
先下載
http://www.relationshipnetwork.com/horo/css/csshover.htc
.abc{
position:absolute;
top:40px; left:100px;
behavior:url(csshover.htc);}
.abc img {
width:100px;
height:100px;
}
.abc img:hover{
width:auto;
height:auto;
}
ie6不支援除a以外的偽類別
利用csshover.htc就可以讓ie6在其他元素使用hover出現效果
由於這個方法必須載入一個落落長的csshover.htc,
所以hover越多,用戶端的效能就越被拖慢
兩個方法都有缺點,或許會有其他更好的方法吧XD
--
孤陰不生 獨陽不長
現在流行放blog在簽名檔
http://subwoofe.blogspot.com/
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 125.224.53.157