Заставить CSS при наведении оставаться в пределах области просмотра

У меня есть установка решения при наведении курсора с помощью 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, где изображения всегда появляются в одном и том же месте слева или справа от изображений, над которыми они наведены, а не в зависимости от положения курсора мыши при наведении курсора на изображение.

    9
    задан Yazmin 22 February 2012 в 16:04
    поделиться