Почему текст внутри моих DOV ведет по -разному с одним и тем же стилем? [дублировать] ⇐ Html

[Anonymous]

Я хочу, чтобы мой сайт был разделен на две вертикальные разделы, и когда кто -то завис, он переходит, чтобы охватить большую часть страницы. Белая сторона ведет себя именно так, как я хочу: текст и фон перемещаются перед синей стороной, текстом и всем. Когда я навечу синюю сторону, происходит что -то другое. Белая сторона текст наматывается по правой стороне страницы, когда я хочу, чтобы он был покрыт синей стороной.

Код: Выделить всё

/* Container to hold both panels */
.panel-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

/* Shared panel styles */
.panel {
position: absolute;
height: 100%;
top: 0;
transition: width 3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Left (blue) panel */
.left {
left: 0;
width: 50%;
background: #003153;
color: white;

}

/* Right (white) panel */
.right {
right: 0;
width: 50%;
background: white;
color: black;
}

/* Hover states */
.left:hover {
width: 90%;
}

.left:hover + .right{
width: 10%;
text-align: left;
}

.right:hover {
width: 90%;
}

.right:hover + .left {
width: 10%;
}

/* Center */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}< /code>














Text




Text

Они стилизованы идентично , поэтому я не знаю, что делать по -другому! Я пытался изменить вещи, но это не помогает.

Подробнее здесь: https://stackoverflow.com/questions/796 ... me-styling