Css hover not working when try to create sample hover-CodePudding

I'm trying to make very sample animation when hover, but i still don't know why it not work, Here is the react code:

export default function Dropdown() {
  return (
    <div className={styles.containerDropdown}>
     
    </div>
  );
}

Here is css :

.containerDropdown {
 
  border: 3px rgb(49, 59, 49) solid;
  transition: border 1s ease;
  cursor: pointer; 
}

.containerDropdown :hover {
  border: 3px rgb(8, 95, 8) solid;
}

It do not make any change if i hover to that component

CodePudding user response：

Just remove the space after .containerDropdown

.containerDropdown:hover{
  border: 3px rgb(8, 95, 8) solid;
}

CodePudding user response：

Remove space between :hover and selector

.containerDropdown:hover
    {
      border: 3px rgb(8, 95, 8) solid;
    }