Показать div поверх другого div при наведении

@irube · Регистрация: 08.06.2012

Author24 — интернет-сервис помощи студентам

У меня есть таблица. В каждой ячейке есть div. Так вот надо чтобы при наведении на этот блок, появлялся overlay и поверх него div. Подскажите как расположить это все и что надо написать в стиль?

Добавлено через 1 час 26 минут
Сделал стандартный вариант, используя z-index, но почему-то текст, который до наведения на блок курсора был в блоке, при наведении уходит вниз за этот блок, при этом overlay появляется.

Добавлено через 10 минут
Собственно, проблему решил вот так:

HTML5

<div class="click" style="margin-top: 300px; width: 300px; height: 300px; border: 1px #bababa solid; z-index: 1; position: relative;">
            <div class="overlay" style="width: 100%; height: 100%; background: #ffcc00; display: none; z-index: 9999; opacity: 0.5; position: absolute;">   
            </div>  
                        
        </div>

Но вопрос в том, можно ли как-нибудь лучше или элегантнее сделать?

Добавлено через 1 час 50 минут
И так же еще вопрос: появилась проблема с прозрачностью. То есть при установки прозрачности на overlay, то она же накладывается на блок в этом overlay.

@Academik · 15.02.2014, 19:08

CSS

1
2
3

.click{position: relative; top: 0; width: 300px; height: 300px; border: 1px #bababa solid; margin-top: 300px;}
.click .overlay{display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffcc00; opacity: 0.5;}
.click:hover .overlay{display: block;}

HTML5

1
2
3

<div class="click">
     <div class="overlay"></div>        
</div>

Новые блоги и статьи
Почему при инициализации массива 3х3х3 будет создано 13 одномерных массивов? Alexander-7 16.01.2025 При инициализации многомерного массива, в данном случае трехмерного массива размерностью 3x3x3, может возникнуть путаница относительно того, как структура данных организована в памяти. Общее число. . .	Использование связки C# и PHP в корпоративной разработке и микросервисной архитектуре InfoMaster 16.01.2025 Введение в интеграцию C# и PHP В современной корпоративной разработке все чаще возникает потребность в создании гибких и масштабируемых решений, способных эффективно решать широкий спектр. . .	Как использовать Kerio дома для управления сетью и пользователями InfoMaster 16.01.2025 Использование технологий для улучшения повседневной жизни стало неотъемлемой частью современного быта. Одной из таких технологий является Kerio — мощный инструмент для управления сетью и. . .	Есть ли будущее у DVD и Blu-ray? InfoMaster 16.01.2025 В эпоху стремительного развития цифровых технологий и повсеместного распространения потоковых сервисов вопрос о будущем физических носителей информации становится все более актуальным. Особенно остро. . .	Как проводить научные вычисления на Python InfoMaster 15.01.2025 Python стал одним из наиболее востребованных языков программирования в области научных вычислений благодаря своей простоте, гибкости и обширной экосистеме специализированных библиотек. Научные. . .	Создание игры типа Minecraft на PyGame/Python: пошаговое руководство InfoMaster 15.01.2025 В данном руководстве мы рассмотрим процесс создания игры в стиле Minecraft с использованием библиотеки PyGame на языке программирования Python. Этот проект идеально подходит как для начинающих. . .
Как создать свою первую игру в стиле Doom на Unreal Engine InfoMaster 15.01.2025 Разработка шутера от первого лица в стиле классического Doom представляет собой увлекательное путешествие в мир игрового программирования, где сочетаются творческий подход и технические навыки. . . .	Параллельное программирование: основные технологии и принципы InfoMaster 15.01.2025 Введение в параллельное программирование Параллельное программирование представляет собой фундаментальный подход к разработке программного обеспечения, который позволяет одновременно выполнять. . .	Как написать микросервис на C# с Kafka, MediatR, Redis и GitLab CI/CD InfoMaster 15.01.2025 В современной разработке программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот подход позволяет разделить сложную систему. . .	Что такое CQRS и как это реализовать на C# с MediatR InfoMaster 15.01.2025 Концепция CQRS и её роль в современной разработке В современном мире разработки программного обеспечения архитектурные паттерны играют ключевую роль в создании масштабируемых и поддерживаемых. . .	Как настроить CI/CD с Azure DevOps InfoMaster 15.01.2025 CI/ CD, или непрерывная интеграция и непрерывное развертывание, представляет собой современный подход к разработке программного обеспечения, который позволяет автоматизировать и оптимизировать процесс. . .	Как настроить CI/CD с помощью Jenkins InfoMaster 15.01.2025 Введение в CI/ CD и Jenkins В современной разработке программного обеспечения непрерывная интеграция (CI) и непрерывная доставка (CD) стали неотъемлемыми элементами процесса создания качественных. . .

	15.02.2014, 19:08