Alternative Hintergrundfarbe für Geschwister Div ⇐ HTML

[Anonymous]

Ich bin in ein Problem für dieses System, das ich erstelle. Ich habe insgesamt vier Geschwister -Div -Behälter. Sie gehen so in einer normalen Desktop-Ansicht:

Blau Red Blue Red

Dies funktioniert für 2/3 Ansichtsfenster, um die Hintergrund-Color als alternative Farbe anzuzeigen. Es funktioniert im normalen Desktop-Modus und einem 640px-Bildschirm und unten, aber für mein mittleres Ansichtsfenster. Grundsätzlich brauche ich die Farbe der Divs, um sich in einem solchen Muster zu ändern: < /p>

Blaurot < /em> < /p>

rot blau < /em> < /p>

Code: Select all

body {
margin: 0;
}
.box-container {
position: absolute;
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
.blue-box, .red-box {
height: 50%;
width: 25%;
display: inline-block;
vertical-align: top;
padding: 0;
margin: 0;
transition: all .5s ease-in-out;
}
.blue-box {
background-color: blue;
}
.red-box {
background-color: red;
}
.blue-box:hover, .red-box:hover {
background-color: purple;
cursor: pointer;
}
.blue-box:hover .box-description, .red-box:hover .box-description {
display: none;
}
.blue-box:hover .box-description-hover, .red-box:hover .box-description-hover {
display: block;
color: #FFF;
font-size: 1.5em;
padding-top: 20px;
}
.insideBoxWrap {
padding: 50px 18%;
}
.box-title {
color: #FFF;
font-size: 2.6em;
}
.box-description {
padding-top: 15px;
color: green;
font-size: 1.5em;
}
.box-description-hover {
display: none;
}
/*----------------------------------------------PHONE MEDIA QUERY 640--------------------------*/

@media screen and (max-width:640px) {
.box-container {
width: 100%;
height: 50%;
}
.blue-box, .red-box {
height: 50%;
width: 100%;
display: block;
}
.blue-box:hover, .red-box:hover {
height: 100%;
}
.blue-box:hover .box-description-hover, .red-box:hover .box-description-hover {
display: block;
color: #FFF;
font-size: 1.1em;
padding-top: 20px;
}
.insideBoxWrap {
padding: 30px 30px;
}
.box-title {
font-size: 1.6em;
}
.box-description {
padding-top: 5px;
color: green;
font-size: 1.1em;
}
}
/*----------------------------------------------PHONE MEDIA QUERY 641 - 840--------------------------*/

@media screen and (min-width: 640px) and (max-width:840px) {
.box-container {
width: 100%;
height: 100%;
}
.blue-box, .red-box {
height: 33%;
width: 50%;
display: inline-block;
}
}< /code>



Box 1
Normal View
Hover View



Box 2
Normal View
Hover View



Box 3
Normal View
Hover View



Box 4
Normal View
Hover View