JavaScript - onmouseover / onmouseout

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").mouseover(function(){
        $("p").css("background-color", "yellow");
    });
    $("p").mouseout(function(){
        $("p").css("background-color", "lightgray");
    });
});
    // onmouseover / onmouseout
function onmouseover() {
    $("#btn1").css("background-color", "red");
}
function onmouseout() {
    $("#btn1").css("background-color", "");
}
</script>
</head>
<body>

    <form id="form1" runat="server">
    <div>
        <input type="button" id="btn1" onmouseover="onmouseover()" onmouseout="onmouseout()" value="btn"/>
        <p>Move the mouse pointer over this paragraph.</p>
    </div>
    </form>
</body>
</html>