款式不會被圖像覆蓋

我有一個網頁，其中包含一組我設計的鏈接，可將您引導至其他網頁。其中一頁是一張照片庫。款式不會被圖像覆蓋

當我嘗試將縮略圖鏈接到較大的圖像時，我會看到這個黑色邊框高約2-3個像素，比縮略圖稍寬。我已經嘗試了一切來重寫和擺脫這一點，但我似乎沒有任何工作。

a:link,a:visited { 
display: inline; 
font-weight: bold; 
color: #FFFFFF; 
padding-top: 10px; 
padding-bottom: 10px; 
padding-right: 30px; 
padding-left: 30px; 
margin: 10px; 
text-align: center; 
text-decoration:none; 
border: 2px solid black; 
} 

a:hover { 
background-color: #3bb2cE; 
border: 2px solid black; 
transition-property: background-color; 
transition-duration: 1s;  
} 

a:active { 
background-color: #3bb2cE; 
border: 2px solid black; 
} 

.link2 a:link, .link2 a:hover; .link2 a:active { 
margin: 10px; 
border: none; 
}

link2是我想重寫CSS。它不工作，甚至在HTML：

<a class="link2" href="images/stairs1.jpg"><img src="images/stairs1_thumb.jpg" /></a> 
<a class="link2" href="images/staris2.jpg"><img src="images/stairs2_thumb.jpg" /></a>

這裏是發生了什麼事的形象：

Image of my HTML page

來源

2013-11-23 user3025427

從你的CSS

border: 2px solid black;

來源

2013-11-23 17:23:45 gotofritz

不需要拆卸任何刪除此css

http://jsfiddle.net/cancerian73/bX4WH/1/

a:link, a:visited { 
display: inline; 
font-weight: bold; 
color: #FFFFFF; 
padding-top: 10px; 
padding-bottom: 10px; 
padding-right: 30px; 
padding-left: 30px; 
margin: 10px; 
text-align: center; 
text-decoration:none; 
border: 2px solid black; /*for no border remove this*/ 
display:inline-block; /*add this*/ 
}

來源

2013-11-23 17:28:18 San

如果無法刪除邊框，而你只需要覆蓋的邊界，使用方法：

a.link2 { 
    margin: 10px; 
    border: none; 
}

jsFiddle example - 它的工作原理。

您的其他造型（.link2 a:link, .link2 a:hover; .link2 a:active）未應用。選擇器，.link2 a:link正在選擇一個a元素，誰是鏈接，而元素的孩子是.link2 ..這顯然不起作用，因爲.link2是您試圖從中刪除邊框的a元素。

簡單地說，就是使用a.link2，它選擇a元素與類.link2。

如演示所示，這將有效覆蓋初始樣式，刪除邊框。

來源

2013-11-23 17:29:56

款式不會被圖像覆蓋

回答

相關問題