单击时为什么css按钮会丢失其样式？

Question

我完全失去了这一个。好的，我创建了一个带CSS的按钮，看看CSS代码：

.UploadPhotos a:link{
    display:block;
    width:100px;
    height:22px;
    padding-top:2px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    background:url(../images/btn_image.png) 0 0 no-repeat;
    text-decoration:none;
    color:#FFF;
}
.UploadPhotos a:hover{
    background-position: 0 -24px;
    text-decoration:none;
    color:#060;
}
.UploadPhotos a:active{
    background-position: 0 0px;
    text-decoration:none;
    color:#FFF;
}
.UploadPhotos a:visited{
    background-position: 0 0px;
    text-decoration:none;
    color:#FFF;
}

现在这里是HTML代码：

<div class="UploadPhotos">
    <a id="UpLd" href="uploader/upload.php">Upload Photos</a>
</div>

当我点击它时问题就开始了。链接在iframe中打开另一个页面，用js完成。单击此按钮后，此按钮的所有样式都将消失。即使我在链接上设置了href =“＃”，我也会遇到同样的问题。所以我不相信它的js打开页面。我无法弄清楚为什么一旦点击就会突然消失。

我添加了图片给你们一个想法：

正

悬停

点击

单击

后用光标突出显示文本

Answer 1

因为:link表示“未访问的链接”而不是“任何链接”。

您想要始终应用于链接的任何样式（即除了颜色，背景位置和文本修饰之外的所有内容）都应该应用：

.UploadPhotos a {}

或

.UploadPhotos a:link,
.UploadPhotos a:visited {}

Answer 2

a：访问过并且a：主动需要背景颜色。单击按钮后，它现在处于活动状态并被访问。如果您改变焦点，它就会被访问。此外，如果您选中控件（在单击它之前），您将看到相同的行为，因为状态更改为活动状态。

还要添加另一个类：

.UploadPhotos a {
display:block;
width:100px;
height:22px;
padding-top:2px;
margin-left:auto;
margin-right:auto;
text-align:center;
background:url(../images/btn_image.png) 0 0 no-repeat;
text-decoration:none;
color:#FFF;
}