У меня есть установка решения при наведении курсора с помощью CSS. Однако изображения при наведении не учитывают область просмотра и поэтому в конечном итоге отображаются за ее пределами. Я планировал просто создать новые классы, определяющие смещение в зависимости от местоположения изображения в моем дизайне, но, поскольку я не могу контролировать разрешение, которое использует пользователь, я подумал, что должен быть какой-то способ заставить отображение наведения внутри область просмотра. Кто-нибудь знает, как я могу это сделать?
У меня есть следующий CSS:
.thumbnail:hover {
background-color: transparent;
z-index: 50;
}
.thumbnail span {
position: absolute;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img {
border-width: 0;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
top: 0;
left: 70px;
}
Чтобы сопоставить следующие эскизы с наведением:
У меня есть образец страницы, отображающей поведение:
http: //estorkdelivery.com/example/example2.html
Наведите указатель мыши на изображения внизу, чтобы увидеть, как изображение при наведении курсора отображается за пределами области просмотра.
Спасибо!
Обновление от 22.02.2012 Я тестировал ответ №1 ниже, но в нем появились новые проблемы, такие как необходимость изменения прозрачности и необходимость всегда отображать изображение при наведении курсора в левом верхнем углу изображения - обе проблемы я не видел возможности изменить с помощью параметров сценария. У кого-нибудь есть другие предложения или способ изменить сценарий в ответе №1? Кроме того, я должен добавить то, что я ищу, так как конечный результат - это стилизация изображений при наведении на istockphoto.com, где изображения всегда появляются в одном и том же месте слева или справа от изображений, над которыми они наведены, а не в зависимости от положения курсора мыши при наведении курсора на изображение.