CSS hover being forced - applied to child

Question

I have a .col and .col :hover.

Inside, I have .card.

.col :hover is being applied to .card, and I don't know why!

For context, this is a gallery that shows/hides images based on hover jQuery. I figure the scripts aren't relevant.

Do you see the .col :hover being applied to the child .card like I do? [Card highlight on col hover. Supposed to be whole col highlight][1]

Here is my code:

    --main: whitesmoke;
    --pop: #62cac2;
    --dark: rgb(17, 21, 22);
}
body{
    background:gray;
}
#gallery-container {
    background-color: var(--main);
    margin:auto;
    height: 700px;
    width:600;
}
#gallery {

    background-color: var(--main);
    margin:auto 8px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

.row{
    height: 210px;
    background-color: powderblue;
    display:flex;
    text-align: center;

}
.col{
    margin:auto 6px;
    float: left;
    background: var(--pop);
    height: 95%;
    width: 33%;
    border-radius: 6px;
    
}

.col :hover {
    background-color: #74ece2;
}
.card {
    padding: 6px;
    width: 80%;
    margin: auto;
}

HTML:

    
        

            
            
                
                    
                        
                            
                            
                            
                            
                            
                            
                            
                            
                                                      
                        
                    
                

                
                    
                        
                            
                            
                            
                            
                            
                            
                            
                            
                                                      
                        
                    
                

                
                    
                        
                            
                            
                            
                            
                            
                            
                            
                            
                                                      
                        
                    
                
            
            
            
                
                    
                        
                            
                            
                            
                            
                            
                            
                            
                            
                                                      
                        
                    
                

                
                    
                        
                            
                            
                            
                            
                            
                            
                            
                            
                                                      
                        
                    
                

                
                    
                        
                            
                            
                            
                            
                            
                            
                            
                            
                                                      
                        
                    
                
            
            
            
                
                    
                        
                            
                            
                            
                            
                            
                            
                            
                            
                                                      
                        
                    
                

                
                    
                        
                            
                            
                            
                            
                            
                            
                            
                            
                                                      
                        
                    
                

                
                    
                        
                            
                            
                            
                            
                            
                            
                            
                            
                                                      
                        
                    
                
            
        
    
```


  [1]: https://i.sstatic.net/6qCJP.png

Vinicius Serafim · Accepted Answer

You should not use space between col and :hover, try something like this:

.col:hover {
    background-color: #74ece2;
}

CSS hover being forced - applied to child

Answers (1)

Related Questions