js鼠标移入移出效果【原】

<HTML>
<HEAD>
<!--  meta 解释 :  http://www.haorooms.com/post/html_meta_ds -->
<meta http-equiv="content-Type"content="text/html;charset=utf-8">
<TITLE>js鼠标移入移出效果</TITLE>
<style>
    *{ margin:2;padding:0;}
    .top{background:#5DF5FD; height:20px; position:fixed; z-index:8000;width:100%}
    .width99{width:99%;padding:0;}
    input{
        background-color: yellow;
        border-style: solid;
        border-color: red
    }
</style>

<script type="text/javascript"    src="D:/Old PC/D/html/jQuery/jquery-3.1.0.js" ></script>

<script type="text/javascript">
$(function(){
    var vvv = "eee";

    $("#mybutton").mouseover(function(){
        $("#mydiv").text(vvv);
    })

    $("#mybutton").mouseout(function(){
        $("#mydiv").text("");
    })

})
</script>
</HEAD>
<BODY>
    <button id ="mybutton" >aaaaaaaaaaaa</button>
    <div id="mydiv"></div>
    <input type="image" id="imgbtn" src="http://picm.photophoto.cn/015/037/003/0370031902.jpg" onmouseover="this.src='http://picm.photophoto.cn/015/037/003/0370030833.jpg'" onmouseout="this.src='http://picm.photophoto.cn/015/037/003/0370031902.jpg'" onmousedown="this.src='http://picm.photophoto.cn/015/037/003/0370030688.jpg'" />
</BODY>
</HTML>