Непрозрачность CSS - не может покрывать текст div под

У меня есть div с некоторым текстом в нем и «on hover», я хочу отобразить другой div с другим текстом.

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

Вот jsfiddle

HTML

<div class="outer_box">
        <div class="inner_box">
            Main</div>
            Caption
</div>

CSS

.outer_box {
    width:100px;
    height:100px;
    background-color:orange;

}

.inner_box{
    width:100px;
    height:100px;
    position:absolute;

}

.caption {
    width:100px;
    height:100px;

    background:black;
    color:rgba(255,255,255,1);
    opacity:0;
}

.outer_box:hover .caption{
    opacity:1;
}

Благодаря!

0
nl ja de
При переполнении стека вам предлагается отправить ответ на ваши собственные вопросы и принять те, которые отвечают, если вы это выяснили.
добавлено автор Chris Sobolewski, источник
хорошо, я ненавижу, когда это происходит, я понял это, как только я разместил вопрос. Я могу добавить: .outer_box: hover .inner_box {opacity: 0;} Однако, однако, почему div on-top не охватывает нижеследующее?
добавлено автор DimC, источник

3 ответы

Вам нужно стилизовать текст из первого div, чтобы он исчезал при наведении:

.inner_box:hover .text {
  visibility:hidden;
}
1
добавлено
.inner_box:hover {
    opacity: 0.0;
}
1
добавлено
@MicahDelaneBolen да, но значения непрозрачности лежат между 0.0 и 1.0, 0.0 делают вещи более ясными, я верю. :)
добавлено автор KBN, источник
0.0 слишком точен, не так ли? ;-)
добавлено автор user396070, источник
Да, понял это, но я отвечу на ваш ответ первым! Тем не менее, мне немного странно, что текст не совсем непрозрачен.
добавлено автор DimC, источник

Добавьте это в свой CSS:

.outer_box:hover, .inner_box:hover {
    opacity:0;
}

Если вы заметите, я обязательно включил селектор .outer_box: hover в случае, если ваше намерение когда-либо было сделать внешнюю коробку значительно большей, чем внутренняя коробка.

More useful information about the behavior of the opacity property can be found here: http://www.w3schools.com/cssref/css3_pr_opacity.asp

1
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)