html - 简单的Div滑块 - Thinbug

简单的Div滑块

时间：2013-09-05 10:57:01

标签： html css

请看以下代码：

<html>
<head>
<style>
body,p,ul,ol,li,img,h1,h2,h3,h4,h5,h6,div,hr,br{margin:0;padding:0;}
body{background:yellow;}
#side1 {background:#99f;position:fixed;right:-100;top:50; 
border-top-left-radius:15px;border-bottom-left-radius:15px;  padding:15px; width:150px;}
#side1:hover { } /* I want this to slide in and back to position based on hover */
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<div id=side1 >Twitter</div>
</body>
</html>

我希望这个div能够基于最简单的代码悬停而滑入和滑出。请告诉我如何用最简单的代码实现这一目标。

1 个答案:

答案 0 :(得分：1)

尝试这样的事情;

HTML：

<div class="box">

    <a href="#">
        <img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
        <div class="hidden"></div>

</div>

CSS：

.box{
    position: relative;    
}

.box .hidden{    
   background: yellow;
    height: 300px;    
    position: absolute; 
    top: 0;
    left: 0;    
    opacity: 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    width: 0;
}
.box:hover .hidden{
   opacity: 1;
  width: 500px;

}

jsfiddle：http://jsfiddle.net/u2FKM/3/