Html 简单Div滑块_Html_Css - Fatal编程技术网

Html 简单Div滑块

html css

Html 简单Div滑块,html,css,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-ra

请看以下代码：

<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>


body，p，ul，ol，li，img，h1，h2，h3，h4，h5，h6，div，hr，br{边距：0；填充：0；}
正文{背景：黄色；}
#侧1{背景：#99f；位置：固定；右侧：-100；顶部：50；
边框左上半径：15px；边框左下半径：15px；填充：15px；宽度：150px；}
#side1:hover{}/*我希望它根据hover滑入并返回到位置*/
啁啾

我希望这个div在使用最简单的代码悬停的基础上滑入滑出。请告诉我，如何用最简单的代码实现这一点。

试试这样的方法

HTML:

jsFIDLE:

您可以使用

字幕

标记或css3动画来尝试这一点

<div class="box">

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

</div>

.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;

}