Почему кнопка css теряет свой стиль при нажатии? - PullRequest
Новая
       4

Почему кнопка css теряет свой стиль при нажатии?

3 голосов
/ 22 января 2011

Я полностью потерян с этим.Итак, я создаю кнопку с 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 открывает страницу.Я не могу понять, почему стиль внезапно исчезает после нажатия.

Я добавил изображения, чтобы дать вам, ребята, идею:

Обычный

alt text

Наведение

alt text

После нажатия

alt text

Подсветка текста курсором после нажатия

alt text

Ответы [ 2 ]

3 голосов
/ 22 января 2011

Потому что :link означает «Непосещенная ссылка», а не «Любая ссылка».

Любые стили, которые вы хотите постоянно применять к ссылкам (т. Е. Все, кроме цвета, положения фона и оформления текста), должны применяться либо: 

.UploadPhotos a {}

или 

.UploadPhotos a:link,
.UploadPhotos a:visited {}
2 голосов
/ 22 января 2011

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;
}
...