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

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 に答える