錨覆蓋的img懸停

我的代碼：錨覆蓋的img懸停

<a class="preview" href=""> 
    <img class="frame" src="tmp5.png" alt="" /> 
</a> 

a.preview:hover { 
    background:red url('../images/icons/preview.png') 0 0 no-repeat; 
    display:block; 
    height:100%; 
    width:100%; 
    z-index:40; 
} 
a.preview:hover img { 
    display:block; 
    position:relative; 
    z-index:10; 
}

形象也由CSS樣式，我只想補充懸停錨的背景下，將覆蓋圖像。

我想避免使用JS如果可能的話。

任何人有任何建議？

來源

2011-09-03 Veronique S.

你需要這在IE7的工作？ – thirtydot

會很棒，因爲我想支持這個瀏覽器。 –

howabout：

a.preview:hover img { 
    visibility:hidden 
}

來源

2011-09-03 20:28:22 MLatzke

如果我想隱藏圖像，這將起作用。我只是想將小圖標（預覽）添加到主播:) –

啊，那麼你可以在圖像上放置一個元素，正常隱藏它，並在懸停時顯示它。 – MLatzke

訣竅是儘量不覆蓋錨的形象，但加入了（第二？）圖像內的錨徘徊錨時將變得可見。你的HTML會是這個樣子：

<a class="preview" href=""> 
    <img class="hover" src="/images/icons/preview.png" alt="" /> 
    <img class="frame" src="tmp5.png" alt="" /> 
</a>

然而，這種圖像位置附近或在錨，我們將不得不做出相對的錨，你的錨類將是這個樣子：

a.preview:hover { 
    position: relative; 
    display:block; 
    height:100%; 
    width:100%; 
    z-index:40; 
}

爲了這個新的相對於其父主播形象，我們給它一些風格定位，在這種情況下，使得它在錨的左上角顯示：

a.preview img.hover { 
    position: absolute; 
    top:0; 
    left:0; 
    display: none; /* so it doesn't show by default */ 
}

，並使其SHO w ^徘徊，我們可以爲a.preview另一個懸停類的鏈接時達：

a.preview:hover img.hover { 
    display: block; 
}

（我加在希望搜索這個答案會得到另一種可用的答案）

來源

2012-04-02 20:54:08 sg3s

錨覆蓋的img懸停

回答

相關問題