کار نکردن رویداد html

سلام من در سایتم اومدم و گفتم وقتی که کاربر نشانه گر موس خودش را روی عنصر من بگیرد رنگ عنصرش عوض شود.رویداد onmouseover کار کرد اما رویداد onmouseout کار نکرد.
بخش اچ تی ام ال کد ها

 <a href="https://roocket.ir/aconts/">
<div onmouseout="my11();"onmouseover="my1();"id="1"style="position: relative;top:10%;">
        <button style="background:rgba(238,198,10,1);width:12.5%;height:23%;font-size: 8.5px;float: left;top:13%;position: relative;border-radius: 5px;">

                <h1 style="font-family: MyFontName, 'Segoe UI', Tahoma, sans-serif;" >
<strong>

            ثبت نام
        </strong>

        </h1>
    </button>

بخش جاوا اسکریپت کد ها

  <script>
           function my1(){

document.getElementById('1').innerHTML="<button style='animation-name: mya;font-size:8.5px;width:12.5%;height:23%;float:left;position:relative;top:13%;border-radius:5px;    animation-fill-mode: Forwards;'><h1 id='y'>ثبت نام </h1></button>";
}
function my11(){
    document.getElementById('1').innerHTML="<button style='animaton-name:myu;font-size:8.5px;float:left;position:relative;top:13%;border-radius:5px;animation-fill-mode: Forwards;'><h1 id='y'>ثبت نام</h1></button>";
}
       </script>

لطفا بگید مشکل از کد های جاوا اسکریپت هست یا خطای دیگه ای هست.