остановка css при перемещении всех остальных блоков

0

Я использую событие hover над <div> чтобы создать дополнительное описание элемента.

Проблема в том, что когда вы наводите указатель на <div> он перемещает остальных. В принципе, я хотел бы, чтобы все остальное было на месте, а слово blob просто появилось поверх них.

Вот пример jsfiddle, описывающий проблему

Как я могу изменить его, чтобы другие блоки не сдвигались?

Теги:

2 ответа

2
Лучший ответ

Ваш extra_info должен быть абсолютным для block div

.link{
    position:relative;
    margin : 2em 0em 2em 1.5em;
    float: left;
    width: 10.4em;
    min-height: 17em; 
    max-height: 18.5em;
    text-align: center;
    padding: 0em 0.1em 0.1em 0.1em; 
    background-color: #276277;
}

.block { position:relative; float:left; }

.extra_info{
    z-index: 900;
    position: absolute;
    top: 30px;
    left: 30px;
    display: none;
    width: 275px;
    background: #FFFFBC;
    border-style: inset;
    border-width: 5px;
}

Кроме того, я считаю, что вам нужно сделать это с помощью jquery

$('.link').hover(function() {
    // show the box
    $(this).siblings('.extra_info').toggle();
});

Вот полная демоверсия

Вот демоверсия, где extra_info находится над каждым родительским div

Поделиться
  • 0
    Демо выглядит потрясающе, спасибо! Точная функциональность, которую я искал. Мое единственное беспокойство, почему я должен использовать jquery т.е. почему это, кажется, не работает, используя вместо этого ccs hover
  • 0
    Нет способа указать, какой .extra_info будет отображаться. CSS не содержит такой логики
Показать ещё 1 комментарий
0

Вам не хватает символа подчеркивания.

<div class="extra info">

должно быть

<div class="extra_info">
Поделиться
  • 1
    +1, чтобы убрать понижение, он прав, его jsfiddle был немного неаккуратным
  • 0
    Спасибо, Джон. Исправление имени класса заставило div перестать двигаться. В начальном посте не указывалось, что остальные div должны быть выровнены поверх родительского элемента. Вот почему я не смотрел дальше.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню