鼠标悬浮到单选框，复选框或者文本框时提示（看图）请问一般这是什么原因

img

有大佬提点一下前端小白吗

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>鼠标悬停显示提示信息窗口</title>
        <meta http-equiv="content-type">
        <style type="text/css">
            .content {
                display: none;
                width: 250px;
                height: 70px;
                border-radius: 10px;
                padding: 20px;
                position: relative;
                top: 15px;
                left: 80px;
                background-color: #2F4056;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".contact").mouseover(function() {
                    $(".content").show("slow");
                    $(".contact").mouseout(function() {
                        $(".content").hide("slow");
                    });
                });
            })
        </script>
    </head>

    <body>
        <a href="#" style="color: blue;float=left" class="contact">不再犹豫</a>
        <div class="content" style="color: white;">
            无聊望见了忧郁，达到理想不太易<br /><br /> 谁人定我去或留，定我心中的宇宙
        </div>
        <div>
            1无聊望见了忧郁，达到理想不太易<br /><br /> 谁人定我去或留，定我心中的宇宙
        </div>
    </body>

</html>

img

效果图

检查一下代码拼写和语法