步骤：
1、构造好页面内容；
2、在css中设置一个隐藏类hide，类的样式为display：none；设置显示类show，样式为display：block；
3、给需要隐藏的内容设置类名为hide，这样就隐藏了控件
4、在js标签中，通过控件的类名或者id获取到隐藏对象obhide以及需要监控的对象ob2，再对ob2对象设置onmouseover方法，在这个方法中，将bohide的类名hide更换成show，这样，在鼠标进入ob2控件之中，就会显示隐藏的obhide的内容，
对ob2对象设置onmouseout方法，在这个方法中，将bohide的类名show更换成hide，这样，在鼠标离开ob2控件，就会隐藏obhide的内容，
你要的应该是拖拽效果，可以通过jq插件做
http://www.runoob.com/jqueryui/example-draggable.html基本原理就是鼠标按下修改div的left和top（或者right/bottom）。鼠标离开不变。
<!DOCTYPE html><html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<Style>
#test{
position:absolute
}
</style>
<script>
$(document).mousedown(function(){
$(this).mousemove(function(e){
$("#test").css({ "left": e.pageX+"px", "top": e.pageY+"px" })
$(document).mouseup(function(){
$(this).unbind('mousemove')
})
})
})
</script>
</head>
<body>
<div id="test">ssssssssss</div>
</body>
</html>
用jquery做的话，代码如下:<title></title>
<script src="../js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".logo").mouseenter(function () {
$(".logo_pass").css("display", "block")
}).mouseout(function () {
$(".logo_pass").css("display", "none")
})
})
</script>
</head>
<body>
<div class="logo">111</div>
<div class="logo_pass" style="display:none">222</div>
</body>
</html>
js的话：
给div设置id比较好做
<script type="text/javascript">
window.onload = function () {
var logo = document.getElementById("logo")
logo.onmouseover = function () {
document.getElementById("logo_pass").setAttribute("style", "display:block")
}
logo.onmouseout = function () {
document.getElementById("logo_pass").setAttribute("style", "display:none")
}
}
</script>
</head>
<body>
<div id="logo">111</div>
<div id="logo_pass" style="display:none">222</div>
</body>
