3
У меня возникает проблема для этой системы, которую я создаю. У меня есть в общей сложности четыре ботанических контейнера. Они идут, как это в обычный вид рабочего стола:Альтернативный фоновый цвет для sibling div
Синий Красный Синий Красный
Это работает на 2/3 видовых показать background-color «S в качестве альтернативного цвета. Он работает в нормальном режиме рабочего стола и 640px экрана и ниже, но для моих средних видовых 640-840px лет, экран показывает цвета, как это:
Синих Красного
Синих Красного
Это сделает его очень трудным для чтения. В основном я нужен цвет дивы, чтобы изменить в шаблоне, как это:
Синий Красный
Красный Синий
Есть ли способ, что я могу это сделать?
body {
\t margin: 0;
}
.box-container {
\t position: absolute;
\t width: 100%;
\t margin: 0;
\t padding: 0;
\t height: 100%;
}
.blue-box, .red-box {
\t height: 50%;
\t width: 25%;
\t display: inline-block;
\t vertical-align: top;
\t padding: 0;
\t margin: 0;
\t transition: all .5s ease-in-out;
}
.blue-box {
\t background-color: blue;
}
.red-box {
\t background-color: red;
}
.blue-box:hover, .red-box:hover {
\t background-color: purple;
\t cursor: pointer;
}
.blue-box:hover .box-description, .red-box:hover .box-description {
\t display: none;
}
.blue-box:hover .box-description-hover, .red-box:hover .box-description-hover {
\t display: block;
\t color: #FFF;
\t font-size: 1.5em;
\t padding-top: 20px;
}
.insideBoxWrap {
\t padding: 50px 18%;
}
.box-title {
\t color: #FFF;
\t font-size: 2.6em;
}
.box-description {
\t padding-top: 15px;
\t color: green;
\t font-size: 1.5em;
}
.box-description-hover {
\t display: none;
}
/*----------------------------------------------PHONE MEDIA QUERY 640--------------------------*/
@media screen and (max-width:640px) {
\t .box-container {
\t \t width: 100%;
\t \t height: 50%;
\t }
\t .blue-box, .red-box {
\t \t height: 50%;
\t \t width: 100%;
\t \t display: block;
\t }
\t .blue-box:hover, .red-box:hover {
\t \t height: 100%;
\t }
\t .blue-box:hover .box-description-hover, .red-box:hover .box-description-hover {
\t \t display: block;
\t \t color: #FFF;
\t \t font-size: 1.1em;
\t \t padding-top: 20px;
\t }
\t .insideBoxWrap {
\t \t padding: 30px 30px;
\t }
\t .box-title {
\t \t font-size: 1.6em;
\t }
\t .box-description {
\t \t padding-top: 5px;
\t \t color: green;
\t \t font-size: 1.1em;
\t }
} \t
/*----------------------------------------------PHONE MEDIA QUERY 641 - 840--------------------------*/
@media screen and (min-width: 640px) and (max-width:840px) {
\t .box-container {
\t \t width: 100%;
\t \t height: 100%;
\t }
\t .blue-box, .red-box {
\t \t height: 33%;
\t \t width: 50%;
\t \t display: inline-block;
\t }
}<div class="box-container">
<div class="blue-box">
<div class="insideBoxWrap">
<div class="box-title">Box 1</div>
<div class="box-description">Normal View</div>
<div class="box-description-hover">Hover View</div>
</div>
</div><div class="red-box">
<div class="insideBoxWrap">
<div class="box-title">Box 2</div>
<div class="box-description">Normal View</div>
<div class="box-description-hover">Hover View</div>
</div>
</div><div class="blue-box">
<div class="insideBoxWrap">
<div class="box-title">Box 3</div>
<div class="box-description">Normal View</div>
<div class="box-description-hover">Hover View</div>
</div>
</div><div class="red-box">
<div class="insideBoxWrap">
<div class="box-title">Box 4</div>
<div class="box-description">Normal View</div>
<div class="box-description-hover">Hover View</div>
</div>
</div>
</div>