css a：鏈接樣式文本和圖像

我有一個快速css問題，這是困擾我的問題，我現在似乎無法弄清楚。css a：鏈接樣式文本和圖像

我已經設計了我的頁面上的鏈接，在懸停時有一個底部邊框，但底部邊框出現在圖片上也有鏈接，我無法弄清楚如何保持邊框不出現在圖像上。

這是我目前有。

#main a:hover { 
    border-bottom:solid 1px #7b9a04; 
    color:#333; 
} 

img, img a:hover { 
    border-bottom:none; 
}

但是，這似乎並不奏效。我不認爲它有任何其他風格重寫它，因爲如果我刪除#main a：hover樣式，圖像不再有底部邊框，但網站上的其他鏈接都沒有。

來源

2010-09-21 Adam

好了，'IMG一個：hover'肯定是行不通的，因爲'img'標籤不能有後代。 – 2010-09-27 16:51:48

'a img：hover'或'a：hover img'更好:)無論如何，鏈接上的「border-bottom」......不是「text-decoration：underline」，你知道......鏈接的默認樣式。 – Shikiryu 2010-09-30 15:56:37

我更喜歡使用border-bottom，因爲它給了你更多的選擇，而不僅僅是文本修飾：下劃線。使用邊框，您可以調整厚度，然後將文本完全變爲不同的顏色。 – Adam 2010-09-30 21:23:24

的問題是與鏈接元件<a>，不與圖像鏈接本身。當您爲懸停狀態<a>指定底部邊框時，它也適用於包含圖像的鏈接。所以，當你懸停在這樣一個鏈接（包含圖像）時，它是顯示邊框底部的鏈接。不是圖像。

雖然有一個修復。嘗試應用：

a img { 
    display: block; 
    }

這將重置<a>造型。這種方法有一個注意事項—使用這種方法可能會破壞佈局。所以謹慎使用它。

來源

2011-05-23 16:33:40 immysl

這對我有用。正如你所提到的，我認爲這裏的其他答案沒有意識到問題出在鏈接上，而不是圖像。 – KobeJohn 2012-02-12 23:28:23

這似乎是一個非常糟糕的解決方法，因爲它會強制所有圖像的鏈接默認是阻止的權利？更好的選擇是將元素的特定類放在鏈接圖像並以此方式定位的元素上？ – Cameron 2013-01-28 05:15:16

-1

根據css specificity它應該工作，只要你把圖像邊界CSS後其他CSS後。

另外，不需要像這樣分開p和td。

#main a { 
    color:#7b9a04; 
    text-decoration:none; 
} 

#main a:hover { 
    color:#333; 
    border-bottom:solid 1px #7b9a04; 
}

真的是你所需要的。

來源

2010-09-21 23:47:07 Galen

感謝您的提示。我仍然遇到問題，並且圖像邊框會在其他鏈接樣式之後出現。也許它是某種緩存問題。我會在早上在另一臺機器上嘗試它。 – Adam 2010-09-22 01:01:07

-1

在懸停聲明之後，如何明確定義圖像沒有邊框？

#main a:hover { 
    border-bottom: solid 1px #7b9a04; 
} 

img { 
    border: none; 
}

來源

2010-09-22 08:46:08 espais

似乎沒有幫助。我在這一個上虧本。 – Adam 2010-09-22 20:11:32

@亞當：你可以分享一個鏈接到你的網頁或共享你的HTML/CSS，有可能是其他東西重寫它 – espais 2010-09-23 07:42:54

我不認爲這是可行的，因爲邊界應用於鏈接，而不是圖像。 – KobeJohn 2012-02-12 23:12:54

如何

a[href$=jpg]:hover, 
a[href$=jpeg]:hover, 
a[href$=png]:hover, 
a[href$=gif]:hover { 
     text-decoration: none; 
     border: 0; 
     border: none; 
     }

來源

2016-08-21 04:05:45

css a：鏈接樣式文本和圖像

回答

相關問題