CSS :hover command is not working - html

Question

So i am creating a test webpage but having trouble with getting the :hover command to work properly. No matter what i have tried to do from research seems to work so i am in need of some help.
I am trying to blur out a image and then have text fade in, but i got stuck at having the image blur out using webkit filters. So i stripped it back and just tried changing one colour to another, and even that did not work. What Seems to be the problem?
HTML
#MenuHome {
top:-20px;
right:130px ;
font-size: 40px;
}
#Checkout {
left:190px
}
body {
height:1100px;
}
/*Content*/
#Content {
position:absolute;
top:100px;
width:1100px;
height: 2000px ;
left:50% ;
margin-left: -550px;
background-color: #ecf0f1;
border-radius:15px;
box-shadow:5px 10px 10px rgba(136, 116, 116, 0.31);
z-index: -1
}
#Content_Products {
position:absolute;
top:100px;
width:1100px;
height: 870px ;
left:50% ;
margin-left: -550px;
background-color: #ecf0f1;
border-radius:15px;
box-shadow:5px 10px 10px rgba(136, 116, 116, 0.31);
z-index: -1
}
#TopSection {
position: absolute;
top: 0px;
width: 100%;
Height: 250px;
background-image:url(AboutUsImage.jpg);
border-bottom-style: solid;
border-bottom-color: rgba(60, 231, 178, 0.64);
border-bottom-width: 5px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#AboutUs1 {
font-family:'Ek Mukta';
color:white;
font-size: 48px;
z-index: 5;
text-align: center;
padding: 50px
}
#Info {
z-index:0;
position: absolute;
top:255px;
width: 1100px;
}
.TelescopesLink {
position:absolute;
display:inline-block;
left:585px;
top:30px;
height:250px;
width:500px;
}
.MountLink {
z-index: 1;
position:absolute;
left:15px;
top:30px;
height:250px;
width:500px;
background-color: green;
}
.MountLink:hover{
z-index: 1;
background-color: red;
}
.AstroLink {
position:absolute;
left:15px;
top:330px;
height:250px;
width:500px;
}
.AccessoriesLink {
position:absolute;
top:330px;
left:585px;
height:250px;
width:500px;
}
/*With the main culprit being */
.MountLink {
z-index: 1;
position:absolute;
left:15px;
top:30px;
height:250px;
width:500px;
background-color: green;
}
.MountLink:hover{
z-index: 1;
background-color: red;
}
<div id="Content_Products">
<div id="TopSection">
<h1 id="AboutUs1">Products</h1>
</div>
<div id="Info">
<div class="TelescopesLink">
<img src="telescopes.jpg" >
</div>
<div class="MountLink">
</div>
<div class="AstroLink">
<img src="astro.jpg" >
</div>
<div class="AccessoriesLink">
<img src="accessories.jpg"</img>
</div>
</div>
</div>
I just cant get it to work, any help or advice would be appreciated

Answer 1

because #Content_Products is positioned absolutely with a minus z-index, the body element is on top of it, so when you hover over the green box, you are actually hovering over the body tag above it.
if you did
body:hover .MountLink{
z-index: 1;
background-color: red;
}
you'll see it work, but the main issue is the z-index:-1 on #Content_Products

Answer 2

z-index is creating problem simply remover z-index form your code and everything will work good..
and css is case sensitive
in #TopSection Height shouldn be height.