Hover class not working in floating div

HTML & CSS
1

Im looking to demonstrate to a customer a ‘new idea’ for a menu on their website (I don’t host or run their site at the moment) I built a verticle css slide out menu that works fine, but to really show it off I wanted to float my code in a div over an iframe of the existing site, that way the customer can see everything without the need for too much imagination.

My issue is that while the floating DIV and iframe have worked beautifully (using code I found on this site) the mouseover / hover elements no longer work when you mouseover the coloured menu on the left hand side.

the demo site can be found here http://creative-zest.com/drapertest/


/*= GENERAL STYLING
--------------------------------------------------------*/
@font-face
{
	font-family: titilliumweb-semibold;
	src: url('../fonts/titilliumweb-semibold.ttf');
}


body {font-family: titilliumweb-semibold;}

a{ text-decoration: none; }
h2 {  color: #fff; font-size: 14px; margin: 0 24px;}
.frame{
	position: fixed;
	top:0; 
	left:0; 
	bottom:0; 
	right:0; 
	width:100%; 
	height:100%; 
	border:none; 
	margin:0; 
	padding:0; 
	
	
   
}
.bar{
    position:absolute;
    top:100px;
    left:0;
    width:250px;
	display:block
   
    }
.holder{
    width: 100%;
    height:100%;
    position:relative;
	z-index:999999;
	
}

/*= ICON BOXES
--------------------------------------------------------*/

ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.vent {background: #e74c3c;}
li.icon-box.biotech {background: #1dd0ad;}
li.icon-box.group {background: #3498db; }
li.icon-box.care {background: #4cfd77;}
li.icon-box.layers {background: #f39c12;}
li.icon-box.heat {background: #e74c3c;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}

.icon-box a {display: block; }



/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box.vent h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #E74C3C; 
	 line-height: 120px; 
	 width: 150px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
		border-left: 3px solid #a7382d;
		
}

.icon-box.vent a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	
}

.icon-box.biotech h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #1dd0ad; 
	 line-height: 120px; 
	 width: 150px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
    border-left: 3px solid #0d866e;
}

.icon-box.biotech a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	
}


.icon-box.group h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #3498db; 
	 line-height: 120px; 
	 width: 150px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #2177b1;

}

.icon-box.group a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;

	 
}


.icon-box.care h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #4cfd77; 
	 line-height: 120px; 
	 width: 150px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #0d866e;
}

.icon-box.care a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	 
}

.icon-box.layers h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #f39c12; 
	 line-height: 120px; 
	 width: 150px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #bc780d;
}

.icon-box.layers a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	 
}

.icon-box.heat h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #e74c3c; 
	 line-height: 120px; 
	 width: 150px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #a7382d;
}

.icon-box.heat a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	 
}



/*= MENU ICONS
--------------------------------------------------------*
span.icon { display: inline-block; background: url('../img/icon-sprites2.png')no-repeat;  width: 32px; height: 32px; margin: 43px 40px;}
span.icon.vent { background-position: 0px 0px;}
span.icon.biotech { background-position: -36px 0px;}
span.icon.group { background-position: -72px 0px;}
span.icon.care { background-position: -109px 0px;}
span.icon.layers { background-position: -145px 0px;}
span.icon.heat { background-position: -180px 0px;}
2

Hi there x2slnelson,

adding an appropriate z-index value here…

.bar{ 
    position: absolute;
    top: 100px; 
    left: 0; 
    width:  250px; 
   display: block 
 }

…should do the trick. :winky:

Start at 1 and increase incrementally if necessary. :biggrin:

coothead

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.