2012-02-20 71 views
2

當我將鼠標懸停在鏈接的圖像上時,我看到懸停在圖像下方的背景顏色。如何避免這種情況?a:懸停背景與img裏面

是否有任何解決方案不會涉及將特殊類應用於a元素(如a.nobackground:hover)?

CSS:

a:hover, a:focus { 
    background-color: rgb(240,39,96); 
    cursor: pointer;  
} 

HTML:

<a href="#" title=""><img src="with_transparency.png" alt=""/></a> 

編輯: 設置IMG背景無不起作用

a img { 
    background: none !important; 
} 

IMG背景設置爲任何其他顏色如果沒有非固體c,就會做這項工作olor(或圖形)下面的圖像(在這種情況下.png)

a img { 
    background: #000 !important; 
} 

回答

2

設置圖像的背景顏色做你想要的?

a img { 
    background: none; 
} 

根據您的樣式表,你可能需要在「無」前面的!important爆炸覆蓋的其他條件。

編輯:第二個想法,你可能想明確設置一個顏色值,而不是簡單地說「無」。

另一種編輯:確實,如果透明PNG背後的顏色或背景不是純色,則會遇到一些問題。另一種方式是這樣的:

<a href="#" class="transparent_png"></a> 

而CSS:

.transparent_png { 
    background-image: url('with_transparency.png'); 
    background-color: transparent; 
    display: inline-block; 
    width: ??px; 
    height: ??px; 
} 

所以在這裏,你不實際使用的圖像標籤,但可以覆蓋該選項通常適用於在background-color屬性:懸停和a:主動。這是否工作?

+1

但你必須記得添加顯示:塊到.transparent_png並給它的高度和寬度 – Memke 2012-02-21 14:07:37

+0

啊,謝謝你......傻了我。如果在您的設計中,「塊」顯示成爲問題,您可以嘗試內聯塊。 – Matt 2012-02-21 14:36:26

0

如果我正確地理解了這個問題......您需要將特殊類應用到該特定鏈接,或者如果鏈接與其他位置不同,則通過其位置調用鏈接。例如:

div div div a {} 

正如Matt所說,您可能需要使用!因爲您有一個包含頁面中所有鏈接的規則。我推薦一個不同的課程,從語義的角度來看它更好。