关于js和jquery的鼠标移入事件??新手求大神带飞

问题描述:

图片说明鼠标移入QQ头像,就会显示一个小窗体。请问怎样才能实现那个小窗体,注意:不要页面上最小化,还原,关闭等按钮。就类是qq显示的那样

jquery 的

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        .container{
            width: 100px;
            height: 100px;
            background-color: salmon;
        }
        .container div{
            width: 50px;
            height: 50px;
            position: relative;
            left: 100px;
            display: none;
            background-color: aqua;         
        }
        /*.container:hover div{
            display: block;
        }*/
    </style>
    <body >
        <div class="container">
            <div></div>
        </div>
    </body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    $(".container").hover(function(){
        $(this).children().slideToggle()
    })
</script>

头像



在标签里加个title就可以了,比如

头像

可以通过父元素相对定位,子元素绝对定位,再通过事件控制他的显示隐藏

 <!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        .container{
            width: 100px;
            height: 100px;
            background-color: salmon;
        }
        .container div{
            width: 50px;
            height: 50px;
            position: relative;
            left: 100px;
            display: none;
            background-color: aqua;         
        }
        .container:hover div{
            display: block;
        }
    </style>
    <body >
        <div class="container">
            <div></div>
        </div>
    </body>
</html>

$(".container").mouseover(function(){
$(this).children().show();
});
$(".container").mouseout(function(){
$(this).children().hide();
});