Javascript 嵌套的div元素不响应onmouseout

我正试图把两个div嵌套在一起。将鼠标悬停在任意一个div上时，两个元素都会旋转并展开。当嵌套div不再悬停在上方时，它将保持展开状态。当两个div都未悬停时，两个div都需要返回正常状态

我的代码导致父div返回，但嵌套div保留其大小。我有没有办法让两个女主角都回到他们原来的状态

HTML：

<div class="frames" id="frame1" onmouseout="document.getElementById('mini_frame').style.width='150px';.style.height='150px';"><div class="mini_frame" onmouseout="stay(this)">1</div></div>

---

你能给我一个礼物吗？这是你想要的吗？这正是我想要的，非常感谢。

<script>
    function stay(x) {
        x.style.width="300px";
        x.style.height="300px";
    }
</script>

.mini_frame {
    background-color:#faf5e6;
    border:solid 1px #000000;
    width:150px;
    height:150px;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    top:10px;
    position:static;
    vertical-align:center;
}
.mini_frame:hover {
    width:300px;
    height:300px;
    transition:all 2s linear 0s;
    -webkit-transition:all 2s linear 0s;
}
#frame1 {
    width:200px;
    height:250px;
    transform:rotate(-20deg);
    -webkit-transform:rotate(-20deg);
    -moz-transform:rotate(-20deg);
    -ms-transform:rotate:(-20deg);
    -o-transform:rotate:(-20deg);
    z-index:5;
    background-repeat:no-repeat;
    right:15px;
    text-indent:5px;
}
#frame1:hover {
    transition:all 2s linear 0s;
    -webkit-transition:all 2s linear 0s;
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate:(360deg);
    -o-transform:rotate:(360deg);
    z-index:6;
    width:400px;
    height:500px;
    background-size:contain;
}