My CSS includes hover conditions for specific divs, such as a parent relationship transition (#playing-field:hover #cont2) and a self transition (#piccont2:hover), but they don't seem to be working properly. The only hover effect that works is the a:hover.
I'm wondering if there's something in the overall style that might be causing these hover transitions not to work as expected. Am I misunderstanding how to create a hoverable div?
a:hover {
color:green;
}
html, body {
font-size: 18px;
color: white;
font-family:'Oswald', sans-serif;
margin: 0;
padding: 0;
overflow:hidden;
height:100%;
width:100%;
}
#header {
height: 10vh;
/*100 */
background: #ed3144;
/* ruby */
text-align: right;
position: relative;
box-shadow: 0px 5px 3px black;
}
#footer {
height: 13.5vh;
/*100 */
background: #181616;
/* almost black */
text-align: right;
position: relative;
top: -6vh;
z-index: -1;
}
#above-footer {
height: 3vh;
background: #FFD700;
position: relative;
top: -13vh;
z-index: 0;
}
#header-content {
position:absolute;
bottom:5px;
right: 10px;
}
#dropbin {
position: relative;
text-align:center;
}
#dropbinbar {
height:3.5vh;
/*35*/
background: #181616;
/* almost black */
z-index: -3;
}
#bin {
height: 6vh;
/*60*/
width: 13%;
background: #635856;
/*greyish*/
z-index: -1;
box-shadow: -5px 5px 3px #181616;
text-align: center;
float:left;
}
#bin-content {
position:absolute;
text-align: center;
/*text-transform: uppercase;*/
font-size: 30px;
font-size: 1.5vw;
font-weight: normal;
bottom: .5vw;
width: 100%;
}
#playing-field {
height:73vh;
/*865*/
clear:both;
overflow: hidden;
position:relative;
top: -6vh;
z-index: -10;
}
#playing-field:hover #cont2 {
height: 80%;
background: #ed3144;
}
#piccont1 {
width: 200px;
height: 200px;
background-color: #ed3144;
/* ruby */
margin:0 auto;
position: absolute;
top: -webkit-calc(50% - 100px);
top: -moz-calc(50% - 100px);
top: -calc(50% - 100px);
left: -webkit-calc(25% - 100px);
left: -moz-calc(25% - 100px);
left: -calc(25% - 100px);
z-index: 0;
}
#piccont2 {
width: 200px;
height: 200px;
background-color: black;
margin: 0 auto;
position: absolute;
top: -webkit-calc(50% - 100px);
top: -moz-calc(50% - 100px);
top: -calc(50% - 100px);
left: -webkit-calc(75% - 100px);
left: -moz-calc(75% - 100px);
left: -calc(75% - 100px);
z-index: 0;
}
#cont1 {
width: 50%;
height: 100%;
float: left;
background: black;
z-index: -4;
}
#cont2 {
width: 50%;
height: 100%;
float: right;
background: #ed3144;
z-index: -3;
}
#piccont2:hover :
-webkit-transform: translate(3em, 0);
-moz-transform: translate(3em, 0);
-o-transform: translate(3em, 0);
-ms-transform: translate(3em, 0);
left: -webkit-calc(50% - 100px);
left: -moz-calc(50% - 100px);
left: -calc(50% - 100px);
background-color: #ed3144;
}