CSS-спрайты, показывающие значок с разбитым изображением над изображением, но наведение все еще работает - PullRequest
Новая
       29

CSS-спрайты, показывающие значок с разбитым изображением над изображением, но наведение все еще работает

1 голос
/ 17 декабря 2009

Я не могу понять это ... надеюсь, кто-то еще может.

У меня есть кнопка изображения.Эффект парения работает отлично.Тем не менее, у меня значок разорванного изображения IE над изображением кнопки.

Смотрите здесь: Funky Image Funky Image Hover

Как вы можете видеть... они оба работают за исключением этого раздражающего разбитого изображения.

Вот мой CSS: 

.donate-btn{
background: transparent url(/custom/img/donate-btn.png) no-repeat;
overflow:hidden;
height:45px;
width:210px;
float:left;
}
.donate-btn:hover{
background: transparent url(/custom/img/donate-btn.png) no-repeat;
height:45px;
width:210px;
background-position: 0 -45px;
}

1 Ответ

2 голосов
/ 17 декабря 2009

Это просто означает, что вы ссылаетесь на несуществующее изображение в атрибуте source. Вы должны рассмотреть использование фактического тега <button> вместо этого. Для удаления границ и отступов нужны лишь несколько дополнительных атрибутов стиля: 

.donate-btn{
    background: transparent url(/custom/img/donate-btn.png) 0 0 no-repeat;
    overflow:hidden;
    height:45px;
    width:210px;
    border: none;
    padding: 0;
    float:left;
}

.donate-btn:hover{
    background-position: 0 -45px;
}

Я также упростил ваш CSS, удалив некоторые ненужные стили в состоянии наведения. 

<button class="donate-btn" type="submit"></button>
...