Question

我试图在彼此内嵌两个div。当您悬停任一div时，两个元素都会旋转和展开。当嵌套的div不再悬停在它上面时，它会保持扩展状态。当div都没有悬停时，两个div都需要恢复正常状态。

Code I导致父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>

JavaScript：

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

CSS：

.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;
}

嵌套的div元素不响应onmouseout

0 个答案: