html - 如何在悬停时使用 css 移动父 Div 位置

Question

任何人都有解决方案我想通过鼠标悬停时的CSS移动div位置当我将鼠标悬停在div上时向下移动div....

HTML

 <div class="movediv">I Want to Move this div on hover via css</div>
<div class="testing">
<a class="Linktohover">Test</a>
    <div class="showDiv">
        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</div>

CSS

   .showDiv {
    position: absolute;
    left: -9999px;
    display: block !important;
    font-size: 14px !important;
}
.testing:hover .showDiv {
    left: 0px;
    display: block !important;
}
.testing {
    position: absolute;
    top: 0px;
}
.movediv {
    margin-top: 30px;
}

SEE DEMO

Answer 1

像这样的类型

DEMO

.container 
   {
    position:absolute; bottom:0; right:0; left:0;
    margin-right:auto; margin-left:auto;
    width:50%; height:10%;
   }
.a {position:absolute; bottom:0; left:20px; width:30%;}
.b 
   {
    position:absolute; bottom:0; right:0; left:0;
    margin-right:auto; margin-left:auto; width:30%;
   }
.c {position:absolute; bottom:0; right:20px; width:30%;}

.b:hover ~ .a{
-moz-transform:translatex(-50px);
-ms-transform:translatex(-50px);
-o-transform:translatex(-50px);
-webkit-transform:translatex(-50px);
transform:translatex(-50px);
}

.b:hover ~ .c{
-moz-transform:translatex(50px);
-ms-transform:translatex(50px);
-o-transform:translatex(50px);
-webkit-transform:translatex(50px);
transform:translatex(50px);
}