0

我正在尝试将两个 div 相互嵌套。当您悬停任一 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>

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

0 回答 0