Вопрос:
Я попытался сделать эффект выцветания с помощью jQuery. Идея состоит в том, чтобы таким образом располагались два изображения друг над другом.
<img class=»img-circle webdesign » src=»assets/img/webdesign_.png» style=»position: absolute;» > <img class=»img-circle» src=»assets/img/webdesign_hover.png»>
Он хорошо работает с Chrome. Снимок экрана )
Однако у меня проблема с Safari )
Вы можете видеть оба изображения, когда страница загружается, хотя оттенки серого должны появляться поверх цветного и скрывать последнее.
Предложения?
Лучший ответ:
HTML
<img class=»img-circle webdesign » src=»assets/img/webdesign_.png»> <img class=»img-circle» src=»assets/img/webdesign_hover.png» style=’display:none;’>
JS
$(‘.img-circle’).mouseenter(function() { $(‘.img-circle’).toggle(); });
CSS
.img-circle { position: absolute; top: ???; left: ???; } Ответ №1
У меня также были некоторые проблемы (только с Safari) с элементом, который имел абсолютное позиционирование. Я исправил проблему, указав левые и правые свойства:
.element{ position:absolute; left:0; right:0; }