Javascript鼠标悬停按钮_Javascript_Jquery_Html

Javascript鼠标悬停按钮

javascript jquery html

Javascript鼠标悬停按钮,javascript,jquery,html,Javascript,Jquery,Html,我想我很快就可以做到这一点了，但我不知道当用户悬停在我的提交按钮上时如何更改它的颜色，我也是一个非常新的javascript，因此任何帮助都将不胜感激这是我的密码： <html> <head> <title>JavaScript</title> <meta charset="UTF-8"> <meta name="viewport" content="width=devic

我想我很快就可以做到这一点了，但我不知道当用户悬停在我的提交按钮上时如何更改它的颜色，我也是一个非常新的javascript，因此任何帮助都将不胜感激

这是我的密码：

<html>
    <head>
        <title>JavaScript</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            function getName(){
            var name;
            name = window.prompt("Enter your name", "");
            greeting = "User Information for " + name;
            var txt=    document.getElementById('txtWelcome');
            txt.innerHTML=greeting;
            }

    function over() {
            document.getElementById("Submit").style.background  = 'Blue';
        }
        function out() {
            document.getElementById("Submit").style.background = 'Yellow';
        }



    </script> 
</head>
<body onload="getName()">
        <form class="basic_form">
            <h1 id="txtWelcome"></h1>

    <p>Please input your login details</p>
            <fieldset>
                <label class="form_labels">Username:</label>
                <input class="form_fields" type="text"  name="username"><br>
                <label class="form_labels">E-Mail:</label>
                <input class="form_fields" type="email" name="email"><br>
                <label class="form_labels">Password:</label>
                <input class="form_fields" type="password" name="password">
                <input class="form_buttons" type="Submit" value="Submit"><br>
            </fieldset>
        </form>
</body>


JavaScript
函数getName（）{
变量名；
name=window.prompt（“输入您的姓名”）；
问候语=“用户信息”+姓名；
var txt=document.getElementById（'txtWelcome'）；
txt.innerHTML=问候语；
}
（）上的函数{
document.getElementById（“提交”）.style.background='Blue'；
}
函数输出（）{
document.getElementById（“提交”）.style.background='Yellow'；
}
请输入您的登录详细信息
用户名：


电邮：


密码：

以下是javascript解决方案：

var submitButton = document.getElementById('submit');

submitButton.addEventListener('mouseover', function() {
    this.style.backgroundColor='blue';
});

submitButton.addEventListener('mouseout', function() {
    this.style.backgroundColor='yellow';
});

但是为什么不直接使用css呢

input[type=submit]:hover {
  background-color: red;
}

以下是javascript解决方案：

var submitButton = document.getElementById('submit');

submitButton.addEventListener('mouseover', function() {
    this.style.backgroundColor='blue';
});

submitButton.addEventListener('mouseout', function() {
    this.style.backgroundColor='yellow';
});

但是为什么不直接使用css呢

input[type=submit]:hover {
  background-color: red;
}