как изменить кнопку Изображение при наведении курсора - PullRequest
Новая
       9

как изменить кнопку Изображение при наведении курсора

2 голосов
/ 17 августа 2011

Я хочу изменить кнопку изображения с зеленого на желтый при наведении курсора.

Вот мой код CSS 

 a#try-it-button {
    width:273px;
    height:47px;
    margin-left:25px;
    margin-top:372px;
    background:url(../image/try-it-green.png);

}
a#try-it-button:hover {
        width:273px;
    height:47px;
    margin-left:25px;
    margin-top:372px;
    background:url(../image/try-it-orange.png);
}
a.alt { display: none; }

Мой HTML-код 

<div id="y-moringa">


<a id="try-it-button" href="#"><span class="alt"></span></a>

</div>

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 17 августа 2011

Добавить float: left или display: inline-block или display: block к a#try-it-button.

Какой из этих вариантов вам действительно нужен, зависит от макета, который вы желаете.

Вы не делаетенеобходимо скопировать все свойства на :hover (за исключением нового background).

То, что вы на самом деле должны здесь делать, это использовать "CSS-спрайты" (есть много преимуществ) и настройте background-position на :hover.

0 голосов
/ 17 августа 2011

Не проверено, но попробуйте: 

a#try-it-button {
    width:273px;
    height:47px;
    margin-left:25px;
    margin-top:372px;
    display:block; // <-- **I added this**
    background:url(../image/try-it-green.png);

}
a#try-it-button:hover {
    background:url(../image/try-it-orange.png);
}
...