При наведении изображения отображать заголовок / альтернативный тег в центре - PullRequest
Новая
       9

При наведении изображения отображать заголовок / альтернативный тег в центре

2 голосов
/ 29 декабря 2011

Я ищу способ, чтобы при наведении курсора на изображение заголовок или тэг alt отображался в центре изображения (постепенно исчезая), при этом изображение также уменьшалось в непрозрачности.

Я немного осмотрелся, но большинство плагинов javascript, которые я нахожу, создают подсказку, а это не то, что я ищу.

Спасибо за любые предложения.

РЕДАКТИРОВАТЬ: Забыл упомянуть, изображения должны оставаться в простом списке ul, без каких-либо дополнительных div или что-либо обтекание каждого изображения.Они также будут использовать rel attr для shadowbox или аналогичного.

Ответы [ 3 ]

2 голосов
/ 29 декабря 2011

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

$('ul li img').hover(
    function(){
        $(this).css('opacity','.5');
        var a = $(this).attr('alt');
        $(this).parent().append('<div class="title">' + a + '</div>');
    },
    function(){
        $(this).css('opacity','1');
        $(this).next().remove('.title');
    }
);

( Быстрый и грязный jQuery, безусловно, можно улучшить )

CSS 

ul li img{
    position:relative;
}

.title{
    position:absolute;
    z-index:1000;
    top:50%;
    bottom:50%;
    right:50%;
    left:50%;
    width:100px;
    border-radius:5px;
    background:red;
}

( CSS также можно улучшить ... но это дает вам представление )

Пример: http://jsfiddle.net/dgKne/

1 голос
/ 29 декабря 2011

Это просто общее описание того, как вы можете подойти к решению этой проблемы, используя jQuery :

1) Поместите изображение в div и задайте этот класс div (пример: altHover)
2) При наведении мыши сначала выберите тег alt и сохраните его в переменной: var title = $("em").attr("title");
3) в той же функции наведения, создайте новый div внутри hovered div и напечатайте внутри него тег alt: 

$(".altHover").hover(
  function () {
    $(this).append($("<div class='altText'>" + title +"</div>"));
  }, 
  function () {
    $(this).find(".altText").remove();
  }
);
0 голосов
/ 29 декабря 2011

Вы можете использовать то, что есть в ile, но вместо добавления div, вы можете использовать addClass.Просто используйте li в качестве объекта поиска. 

$("li.picture").hover(
    function(){
        $(".selected_result").removeClass("selected_result");
        $(this).addClass("selected_result");
    }
);

Я не являюсь профессионалом javascript, но это даст вам представление.

...