款式不会被图像覆盖

我有一个网页，其中包含一组我设计的链接，可将您引导至其他网页。其中一页是一张照片库。款式不会被图像覆盖

当我尝试将缩略图链接到较大的图像时，我会看到这个黑色边框高约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

款式不会被图像覆盖

回答

相关问题