Noti close button won't show until mouse hover

src/notification/notification.ui

@@ -5,6 +5,10 @@
   <template class="SwayNotificatonCenterNotification" parent="GtkListBoxRow">
     <property name="visible">True</property>
     <property name="can-focus">True</property>
+    <child>
+      <object class="GtkEventBox" id="event_box">
+        <property name="visible">True</property>
+        <property name="can-focus">False</property>
         <child>
           <object class="GtkBox">
             <property name="visible">True</property>
@@ -23,7 +27,7 @@
                     <child>
                       <object class="GtkButton" id="default_button">
                         <property name="visible">True</property>
-                    <property name="can-focus">False</property>
+                        <property name="can-focus">True</property>
                         <property name="receives-default">False</property>
                         <child>
                           <object class="GtkBox">
@@ -181,10 +185,15 @@
                   </packing>
                 </child>
                 <child type="overlay">
+                  <object class="GtkRevealer" id="close_revealer">
+                    <property name="visible">True</property>
+                    <property name="can-focus">False</property>
+                    <property name="transition-type">crossfade</property>
+                    <child>
                       <object class="GtkButton" id="close_button">
                         <property name="label">×</property>
                         <property name="visible">True</property>
-                <property name="can-focus">False</property>
+                        <property name="can-focus">True</property>
                         <property name="receives-default">True</property>
                         <property name="halign">end</property>
                         <property name="valign">start</property>
@@ -196,6 +205,8 @@
                       </object>
                     </child>
                   </object>
+                </child>
+              </object>
               <packing>
                 <property name="expand">False</property>
                 <property name="fill">True</property>
@@ -207,6 +218,8 @@
             </style>
           </object>
         </child>
+      </object>
+    </child>
     <style>
       <class name="notification-row"/>
     </style>

src/notification/notification.vala

@@ -1,9 +1,14 @@
 namespace SwayNotificatonCenter {
     [GtkTemplate (ui = "/org/erikreider/sway-notification-center/notification/notification.ui")]
     private class Notification : Gtk.ListBoxRow {
+        [GtkChild]
+        unowned Gtk.EventBox event_box;
+
         [GtkChild]
         unowned Gtk.Button default_button;
 
+        [GtkChild]
+        unowned Gtk.Revealer close_revealer;
         [GtkChild]
         unowned Gtk.Button close_button;
 
@@ -31,7 +36,7 @@ namespace SwayNotificatonCenter {
 
         public Notification (NotifyParams param,
                              NotiDaemon notiDaemon,
-                             bool show = false) {
+                             bool is_cc_noti = false) {
             this.notiDaemon = notiDaemon;
             this.param = param;
 
@@ -41,11 +46,21 @@ namespace SwayNotificatonCenter {
 
             close_button.clicked.connect (close_notification);
 
+            this.event_box.enter_notify_event.connect (()=> {
+                close_revealer.set_reveal_child (true);
+                return false;
+            });
+
+            this.event_box.leave_notify_event.connect (()=> {
+                close_revealer.set_reveal_child (false);
+                return false;
+            });
+
             set_body ();
             set_icon ();
             set_actions ();
 
-            if (show) {
+            if (is_cc_noti) {
                 this.body.set_lines (10);
                 this.show ();
             }