Question

任何人都有这方面的解决方案我想通过鼠标悬停移动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);
}

Answer 2

使用

.movediv:hover { margin-top:30px;}

而不是

.movediv{ margin-top:30px;}

Answer 3

试试这个

.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{transition: width 2s,
-webkit-transition: width 2s, -webkit-transform 2000s;}
.movediv:hover{margin-left: 35px;
    transform:rotate(0);
-webkit-transform:rotate(0); /* Safari */ }

并且为你提供了参考资料 http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition2 用于平滑过渡

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

3 个答案: