如何使用悬停CSS

任何人有此我想通过CSS移动DIV位置上悬停鼠标移动的div下降解以使父DIV位置，当我鼠标移到格....如何使用悬停CSS

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

来源

2013-08-17 Web Designer RDj

如果你改变你的HTML比是当测试我的鼠标悬停我想移动的div我可以给你一个解决方案 –

” .movediv “ –

是的，多数民众赞成在说什么，如果你愿意改变你的标记订单我可以给你一个解决方案 –

像这种类型的

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

来源

2013-08-17 07:34:04 falguni

请参阅我希望这样的 Acctuly当我鼠标移到图片上我想通过CSS http://jsfiddle.net/dhaval17/EAJMt/ –

@WebDesignerRDj http://jsfiddle.net/kizu/zfUyN/ – falguni

移动父图片你知道我的观点吗？什么acctuly我想 –

使用

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

，而不是

.movediv{ margin-top:30px;}

来源

2013-08-17 07:26:15 Marcin

当我将鼠标悬停在测试上我想移动div“.movediv” –

尝试了这一点

.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-17 07:41:22

我不明白这与转换有什么关系？你和[Fags]（http://stackoverflow.com/a/18286336/1542290）都回答无关紧要.. –

Acctuly我想移动父div的位置鼠标悬停通过CSS不是CSS转换 –

如何使用悬停CSS

回答

相关问题