Question

所以我正在创建一个测试网页但是无法让：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>

我不能让它工作，任何帮助或建议将不胜感激

Answer 1

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

如果你做了

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

你会发现它有效，但主要问题是z-index：#Content_Products上的-1

Answer 2

z-index正在创建问题，只需从代码中删除z-index，一切都会正常运行..

和css区分大小写

在#TopSection高度不应该是高度。

CSS：hover命令不起作用

2 个答案: