发表新帖
发表新帖

Pseudo class :hover does not work in IE7

前端 未结
关注
3 434
野趣味
野趣味 2020-12-02 00:07

I\'ve got such a simple code:


  
Foo

  

    


        

                      

              相关标签:
       

      

      
      

        

          3条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  我在风中等你        
                
              
    
                            
    
                2020-12-02 00:23
              
    
            
    
            
    
                                                                       

    I found that this solution worked better and was a bit cleaner:
    


        <style type="text/css">
        * {
            color: #fff;
        }
        .wrapper {

        }

        .trigger {
            background: #223;
        }

        .appear {
            background: #334;
            display: none;
        }

        .trigger:hover .appear {
            display: block;
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <div class="trigger">
            <p>This is the trigger for the hover element.</p>
            <div class="appear">
                <p>I'm <strong>alive!</strong></p>
            </div>
        </div>
    </div>

</body>

    


    pastebin.
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  佛祖请我去吃肉        
                
              
    
                            
    
                2020-12-02 00:29
              
    
            
    
            
    
                                                                       

    IE7 won't allow you to apply :hover pseudo-classes to non-anchor elements unless you explicitly specify a doctype. Just add a doctype declaration to your page and it should work perfectly.
    


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    


    More on IE7/quirks mode can be found on this blog post.
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  [愿得一人]        
                
              
    
                            
    
                2020-12-02 00:40
              
    
            
    
            
    
                                                                       

    Could it be the double margin problem?
I did an display: inline-block when it happened for a li
http://www.positioniseverything.net/explorer/doubled-margin.html
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
                             

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          

        

      

       
      
    

    

          
 
     
 

        
热议问题