Показывать информацию поверх изображения на ролловере - PullRequest
Новая
       37

Показывать информацию поверх изображения на ролловере

1 голос
/ 04 мая 2010

Я хочу иметь возможность показывать информацию (в основном HTML) над изображением, когда мышь наводит курсор на изображение ... Я знаю, что есть функция .hover() jQuery, но я не уверен, как использовать ее для получения желаемого эффекта .

В идеале, когда пользователь наводит курсор мыши на изображение, оно будет "серым" (например, слой с непрозрачностью 50% черного цвета) с некоторым HTML-кодом, таким как заголовок и т. Д.

Может ли кто-нибудь указать мне правильное направление или предоставить пример кода

Спасибо

Ответы [ 2 ]

9 голосов
/ 04 мая 2010

Вы могли бы сделать что-то вроде этого:

Оберните ваше изображение и div для отображения, как это: 

<div class="imgHover">
    <div class="hover">Test Content for the hover</div>
    <img src="myImage.jpg" alt="" />
</div>

С помощью CSS вот так: 

.imgHover .hover { 
    display: none;
    position: absolute;
    z-index: 2;
}

И, наконец, jQuery использует .hover(), например: 

$(".imgHover").hover(function() {
    $(this).children("img").fadeTo(200, 0.25)
           .end().children(".hover").show();
}, function() {
    $(this).children("img").fadeTo(200, 1)
           .end().children(".hover").hide();
});

Вы можете попробовать приведенный выше код здесь

Это затемняет изображение и отображает <div> над ним при наведении курсора, так что <div> расположен абсолютно прямо над <img>, если вам нужно много контента для переноса, дайте .hover разделите те же размеры, что и изображение ... зависит только от того, какой именно вы собираетесь.

0 голосов
/ 04 мая 2010

Если вы все равно используете jQuery, вам может понадобиться плагин всплывающих подсказок: http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

...