0

任何人都有解决方案我想通过鼠标悬停时通过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;
}

看演示

4

3 回答 3

2

喜欢这种类型

演示

.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);
}
于 2013-08-17T07:34:04.747 回答
0

利用

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

代替

.movediv{ margin-top:30px;}
于 2013-08-17T07:26:15.440 回答
0

试试这个

.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 用于平滑过渡

于 2013-08-17T07:41:22.343 回答