Solve the problem that div hover does not work (only part of the background color changes)

The original code is as follows:

<style>

 .box :hover {

      /* background-color: rgba(246, 248, 252, 1); */
      background-color:black;
      cursor:pointer;
   }
 
</style>

The results are as follows :

You can see that only part of the background has changed color 

I was puzzled, and later realized that sass used in the project would automatically be parsed into sass grammar, and hover in sass is not used in this way.

How to write hover in sass:

<style lang="scss">
 .box {
   &:hover{
      // background-color: rgba(246, 248, 252, 1);
      background-color: black;
      cursor:pointer;
   }
  
 }
</style>

The results are as follows:

So far the problem has been solved.