Make cascading of mx_RoomHeader_closeButton easy to understand (#10756)

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/views/rooms/_RoomHeader.pcss

@@ -179,7 +179,7 @@ limitations under the License.
         mask-size: contain;
     }
 
-    &:not(.mx_RoomHeader_closeButton):hover {
+    &:hover {
         background: rgba($accent, 0.1);
 
         &::before {
@@ -232,10 +232,20 @@ limitations under the License.
     mask-image: url("$(res)/img/element-icons/call/spotlight.svg");
 }
 
-.mx_RoomHeader_closeButton::before {
-    mask-image: url("$(res)/img/cancel.svg");
-    mask-size: 20px;
-    mask-position: center;
+.mx_RoomHeader_closeButton {
+    &::before {
+        mask-image: url("$(res)/img/cancel.svg");
+        mask-size: 20px;
+        mask-position: center;
+    }
+
+    &:hover {
+        background: unset; /* remove background color on hover */
+
+        &::before {
+            background-color: $icon-button-color; /* set the default background color */
+        }
+    }
 }
 
 .mx_RoomHeader_minimiseButton::before {