Как наложить div поверх содержимого другого div, не находясь в этом div

ProgramBox

Как наложить div поверх содержимого другого div, не находясь в этом div

Post author:admin
Запись опубликована:17 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я что-то делаю, и мне интересно, как заставить div накладывать другой div и его содержимое. То, что я пытаюсь сделать, похоже на youtube, когда вы смотрите видео и наводите курсор на чей-то аватар, он покажет небольшое окно с изображением их канала и тому подобное. Вот фотография того, что я сейчас получаю на скриншоте. Вот мои коды для двух divs:
круговой div

 #staff-info {
    width: 400px;
    height: 300px;
    background: #999;
    border: 1px solid #333;
    border-radius: 6px;
    margin: 0 auto;
    position: relative;
}

штатные ящики

 #staff {
    width: 256px;
    height: 60px;
    margin: 7px 4px 7px 4px;
    background: #fff;
    display: inline-block;
    background: #f3f6f9;
}
.staff-avatar {
    width: 40px;
    height: 40px;
    padding: 10px;
    display: inline-block;
    float: left;
}
.staff-name {
    display: inline-block;
    padding-top: 8px;
}
.staff-job {
    padding-top: -100px;
    font-size: 12px;
}

Серая область (основной div)

 #youtuber-about {
    width: 890px;
    height: auto;
    background: #d5d3d3;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    padding: 10px 0px 10px 10px;
    display: inline-block;
}

html для divs

 <div id="staff-info">yolo</div>
        <div id="youtuber-about" style="color: #333;">Our Staff<br>
            <?php
            foreach ($staff as $staff) {
                echo '
                <div id="staff"><img src="'.$staff['avatar'].'" class="staff-avatar"><div class="staff-name">'.$staff['name'].'</div><div class="staff-job">'.$staff['job'].'</div></div>';
            }
            ?>
        </div>

1. Вы можете использовать всплывающую подсказку. Что-то вроде этого onehackoranother.com/projects/jquery/tipsy

2. Чтобы использовать это, вам нужно загрузить их исходный код, я не хочу использовать какие-либо подобные источники для своего проекта, спасибо за ответ

3.Пробовал data-* атрибуты внутри html circular , staff , grey и т.д., :hover data(attr) Внутри? css

4. хорошо, посмотрите это — mkyong.com/jquery/how-to-create-a-tooltips-with-jquery

5. попробуйте использовать javascript, вы добавляете функцию в свой тег как «onmouseover =»здесь идет ваша функция», а также onmouseout =»ваша функция», последнее необязательно.

Ответ №1:

Если вы используете jQuery, вы можете просто добавлять информацию div внутри каждого сотрудника div всякий раз, когда пользователи наводят курсор мыши на этого сотрудника.

  $('#youtuber-about > div').mouseover(function(){
     $(this).append($('#info'));
 });

И затем вы можете довольно легко стилизовать это с помощью CSS, просто установив значение info div равным be position: absolute; и установить для заполнения содержащего элемента, установить для отображения при наведении курсора мыши.

Смотрите демонстрацию

1. Хорошо, это выглядит хорошо, но что, если бы у вас был php foreach, чтобы он отображал более одного.

2. Вот почему я создал 3 контейнера изображений в своей демонстрации. Это для имитации вывода foreach цикла, создающего несколько контейнеров. Обратите div внимание, что для всех трех изображений используется только одна информация.

3. Итак, я заставил его хорошо работать над своим проектом, теперь просто нужно сделать так, чтобы у каждого сотрудника было отдельное информационное окно, должно быть легко

4. Если у каждого сотрудника есть отдельное информационное окно, не могли бы вы просто поместить каждое информационное окно внутри каждого окна персонала для начала и полностью пропустить javascript?

5. Я мог бы, но на самом деле это выглядело бы не так хорошо, как наложение информации.

Ответ №2:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Что я бы сделал, так это иметь div, который содержит оба этих двух divs, и поиграть с вашим CSS и вложенностью divs, чтобы правильно их наложить.

Абсолютное и относительное позиционирование довольно сложно, как первое, но как только вы освоитесь, вы будете делать это влево и вправо

Итак, помните

Добавьте оба divs в третий пустой div, а затем поместите тот, который вы хотите наложить под другим.

Для перемещения используйте

 .something {
position: absolute
top:20%
right:15%
left:10%
bottom:20%
}