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

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

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

Посмотрите здесь: Funky Image Веселое наведение курсора на изображение

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

Вот мой 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;
}

image css internet-explorer hover sprite
person Loony2nz    schedule 17.12.2009    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это просто означает, что вы ссылаетесь на несуществующее изображение в атрибуте 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>
person Corey Ballou    schedule 17.12.2009
comment
@cballou: отлично работает в IE (все версии) и FF, но не в Safari (на Mac или ПК). Мысли? - person Loony2nz; 18.12.2009
comment
Убедитесь, что на вашей кнопке есть type="submit", иначе она не будет действовать как кнопка отправки. - person Corey Ballou; 19.12.2009
comment
забудь :) работает. в форме была ошибка jquery, которая препятствовала загрузке CS и прочего. теперь он работает. забавно, FF 3.x снисходительнее IE и сафари - person Loony2nz; 22.12.2009