Дисплей CSS: нет и: видимость наведения

Я пытаюсь показать изображение, когда наводится другое изображение. Все отлично работает с Safari, но с Chrome и Firefox эффект работает, и изображение замещающее место видно, но они не могут загрузить изображение. Я искал в другом месте и нашел темы для видимости: скрытые и т. Д., Но ни один из них не затрагивает эту проблему в кросс-браузере.Дисплей CSS: нет и: видимость наведения

Вот HTML:

<div class="profile-picture-wrap"> 
<a class="propic"> 
<img src="../images/propicsmall.jpg" width="142" height="194"> 
<span><img src="../images/profilepic.jpg" width="290" height="186" /></span></a> 
</div>

И вот CSS:

.propic span{ 
position:absolute; 
padding: 5px; 
top: 10px; 
left: 10px; 
display: none; 
color: black; 
text-decoration: none; 
    } 

    .profile-picture-wrap:hover .propic span{ 
display: block; 
position:absolute; 
top: -3px; 
right: 900px; 
left: 640px; 

    }

Действительно ценим любую помощь, спасибо.

источник

2012-06-04 SeamusH

Вы пробовали 'z-index'? Создайте демо на [Fiddel] (http://jsfiddle.net/), пожалуйста. –

Осмотрите изображение, используя Firebug в Firefox. Затем наведите указатель мыши на источник изображения и посмотрите, не говорит ли он «Не удалось загрузить URL». Это было бы началом ... –

Tooraj, кто-то избил меня! См. Ниже @ Surendra. Теперь попробуйте z index. – SeamusH

Оказывается, изображения были .tiff-файлами, которые были переименованы в .jpg. Chrome & Firefox, похоже, не нравится, и отказался распознавать их как извлекаемые файлы.

источник

2015-03-15 01:57:38 SeamusH

Я добавил z-index в .propic span css & изменить левый & правый промежуток после наведения, чтобы увидеть его правильно в окне jsfiddle.

Проверьте это здесь: http://jsfiddle.net/UH54X/1/

Я не уверен, что это поможет вам. Я думаю, ты хочешь только этого.

источник

2012-06-04 12:20:40 SVS

Спасибо! Я вернул индекс z, но это не сработало. Тем не менее, многие изменения были внесены с тех пор, я попробую сейчас, спасибо :) – SeamusH

z-index не работает, к сожалению. В Chrome ресурс не загрузился по какой-то причине. – SeamusH

Я протестировал эту скрипту на chrome & firefox, и ее работая отлично, может быть, вы используете более старую версию. Эта скрипка отлично работает в вашем браузере? – SVS

Я опробовал ваш пример кода ... и, похоже, он отлично работает в Chrome после небольшого редактирования.

я должен был изменить свои пути от ../images/image.jpg к изображениям/image.jpg

Вы использовали инструменты разработчика в Chrome, чтобы увидеть, если ресурс (изображение) грузил правильно?

источник

2012-06-04 12:27:04 urbanlemur

Спасибо за ваш ответ! Я пытался изменить путь, как вы, безрезультатно. Будет проверяться с помощью инструментов dev сейчас. – SeamusH

Изображение не загружено правильно .. Первый раз, когда я столкнулся с этой проблемой, мысли? – SeamusH

Вы в ситуации, когда пользователь jquery?или вы застряли с ограничением на использование только css? Я также заметил, что мой пробный процесс, хотя он работал в хроме, firefox и сафари, упал в ie. – urbanlemur

Дисплей CSS: нет и: видимость наведения

ответ

Смежные вопросы