html - CSS:hover命令不起作用

所以我正在创建一个测试网页，但无法使：hover命令正常工作。无论我从研究中尝试做什么，似乎都可以奏效，所以我需要一些帮助。

我试图模糊处理图像，然后使文本淡入，但是我陷于使用Webkit滤镜使图像模糊处理的问题。因此，我将其剥离回来，只是尝试将一种颜色更改为另一种颜色，即使这样也没有用。似乎是什么问题？

的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> 

我无法正常工作，任何帮助或建议都将不胜感激

最佳答案

因为#Content_Products的位置绝对是负z-index，所以body元素位于其顶部，因此，当您将鼠标悬停在绿色框上时，实际上是将鼠标悬停在其上方的body标记上。

如果你做了

body:hover .MountLink{
    z-index: 1;
    background-color: red;
}

您会看到它起作用，但是主要问题是#Content_Products上的z-index：-1