Как отобразить функцию jquery при наведении, не сдвигая следующий элемент вправо - PullRequest
Новая
       24

Как отобразить функцию jquery при наведении, не сдвигая следующий элемент вправо

0 голосов
/ 14 июля 2011

Я пытаюсь создать ряд изображений и при наведении курсора - отображать дополнительную информацию об элементе, например цену и ссылки на элемент. При наведении курсора прямо под элементом отображается поле, содержащее дополнительную информацию (желтым цветом), и мне бы хотелось, чтобы оно отображалось как один элемент с информацией справа и изображением элемента слева. Я также не хочу, чтобы он скользил по следующему элементу, но в верхней части следующего элемента отображается желтая рамка с информацией. Это довольно сложно объяснить, поэтому взгляните на основной код: http://jsfiddle.net/ryanabennett/bFZDL/1/

Как вы, вероятно, можете понять из вопроса, я довольно новичок в кодировании и пробовал вечно с разными позиционными элементами, но, похоже, ничего не работает. Надеюсь, вы можете помочь.

Вот мой HTML: 

<div class="productbox">
 <div class="livitem">
  <div class="Livwidgetexpandimg">
   <a href="#"><img src="#" class="popupbox" /></a>
     <div class="popup"></div>
   </div>
  </div>
 </div>
<div class="productbox">
  <div class="livitem">
    <div class="Livwidgetexpandimg">
      <a href="#"><img src="#" class="popupbox" /></a>
     <div class="popup"></div>
   </div>
  </div>
 </div>

Вот мой CSS: 

.productbox{
float: left;
height: 150px;
margin-left: 5px;
overflow: hidden;
}

.livitem{
float: left;
position: relative;
top: 3px;
}

.livitem:hover{
background: yellow;
}

.Livwidgetexpandimg{
background: blue;
height: 75px;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
padding: 5px;
width: 75px;
float: left;
}

.popupbox{
border: medium none;
height: 75px;
width: 75px;
}

.popup{
background: yellow;
display: none;
float: left;
height: 122px;
margin-left: -10px;
opacity: 0;
width: 175px;
z-index: 50;
}

Вот мой JQuery: 

$(function () {
    $('.livitem').each(function () {
        var distance = 10;
        var time = 200;
        var hideDelay = 1;

        var hideDelayTimer = null;

        var beingShown = false;
        var shown = false;
        var trigger = $('.Livwidgetexpandimg', this);
        var info = $('.popup', this).css('opacity', 0);


        $([trigger.get(0), info.get(0)]).mouseover(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                // don't trigger the animation again
                return;
            } else {
                // reset position of info box
                beingShown = true;

                info.css({
                    top: 10,
                    left: -3,
                    display: 'block'
                }).animate({
                    top: '-=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });
            }

            return false;
        }).mouseout(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.animate({
                    top: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    info.css('display', 'none');
                });

            }, hideDelay);

            return false;
        });
    });
   });

Надеюсь, вы сможете мне помочь ...

1 Ответ

2 голосов
/ 15 июля 2011

Подумайте, это то, что вы ищете: http://jsfiddle.net/vCbMt/1/

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

Этот пример протестирован только в Chrome. весьма вероятно, что для работы z-индекса в IE потребуется дополнительный css. Это фундаментальная проблема в IE, многие темы здесь и в других местах посвящены исправлениям ( подсказка: сборка стека с использованием относительного положения)

Надеюсь, это поможет!

...