Onmouseover（）和Onmouseout（）不起作用

时间：2018-03-29 21:30:59

标签： javascript html html5

当我将鼠标悬停在取消栏上时，它不会执行onmouseover和onmouseout命令。更糟糕的是，它不会执行任何命令本身。你怎么解决这个问题？!!？！？

  <!DOCTYPE html>
<html>
<head></head>
<body style="background-image: 
url(https://img.michaels.com/L6/3/IOGLO/852866719/201341423/10151236.jpg? fit=inside|1024:1024);">
<button onclick="executeCommand()" style="border: 0; background: 0;"><img 
src="https://image.flaticon.com/icons/svg/54/54527.svg" style="padding: 5px 
0px 0px 0px; width: 40px; height: 40px;"></button><div id="search"></div>
<br>  
<script>
function executeCommand(){
document.getElementById("search").innerHTML = "<input type='text' aria- 
label='Search...' placeholder='Search...' value='' id='fx' style='padding: 10px 
50px 10px 5px; background-color: #33333366; border: 0'></input><button 
onclick='deletes()' style='padding: 10px 5px 10px 5px; border: 
0;'>Cancel</button><button onclick='entre()' style='padding: 10px 5px 10px 5px; 
border: 0; background-color: #77bbffff;'>Enter</button><button 
onclick='unsrch()' style='padding: 0px 4px 2px 4px; border-color: #ff0000ff; 
background-color: #e3e3e3ff; color: #ff0000ff; text-decoration: bold;' 
id='hoverover'><b>x</b></button>";
}
function deletes(){
document.getElementById("fx").value="";
}
function entre(){

}
function unsrch(){
document.getElementById("search").innerHTML = "";
}
document.getElementById("hoverover").onmouseover = function() {mouseOver()};
function mouseOver(){
document.getElementById("hoverover").style.background-color = "#555555ff";
}
document.getElementById("hoverover").onmouseout = function() {mouseOut()};
function mouseOut(){
document.getElementById("hoverover").style.background-color = "#e3e3e3ff";
}
</script>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

在javascript中，你必须在camelcase中输入css属性：

document.getElementById("hoverover").style.backgroundColor = "#e3e3e3ff";

您的代码的另一个问题是：

您在execudeCommand()函数中生成了一个元素，但在此元素存在之前就初始化了document.getElementById("hoverover")的鼠标事件。您必须在之后为鼠标悬停/鼠标移动侦听器创建一个委托给dom这样的元素：

function executeCommand() {
    document.getElementById("search").innerHTML = "<input type='text' aria- label='Search...' placeholder='Search...' value='' id='fx' style='padding: 10px 50px 10px 5px; background-color: #33333366; border: 0'/>";
    document.getElementById("search").innerHTML += "<button onclick='deletes()' style='padding: 10px 5px 10px 5px; border: 0;'>Cancel</button>";
    document.getElementById("search").innerHTML += "<button onclick='entre()' style='padding: 10px 5px 10px 5px; border: 0; background-color: #77bbffff;'>Enter</button>";
    document.getElementById("search").innerHTML += "<button onclick='unsrch()' style='padding: 0px 4px 2px 4px; border-color: #ff0000ff; background-color: #e3e3e3ff; color: #ff0000ff; text-decoration: bold;' class='hoverover-class'><b>x</b></button>";

    var buttons = document.querySelectorAll('.hoverover-class');

    for(var i = 0; i < buttons.length; i++) {
        buttons[i].onmouseover = mouseOver;
        buttons[i].onmouseout = mouseOut;
    }
}

function mouseOver(){
    this.style.backgroundColor = "#555555ff";
}

function mouseOut(){
    this.style.backgroundColor = "#e3e3e3ff";
}
executeCommand();

最后一件事：如果您创建多个元素，请尽量避免使用id=""属性。您可以使用document.querySelector()代替，如上例所示：

https://www.w3schools.com/jsref/met_document_queryselector.asp

答案 1 :(得分：0)

这是您的代码，但需要进行编辑才能实现您想要的功能！

public void OnClickButtonLogin(View view) {
    mediaPlayer.start();

    Intent intent = new Intent(this, MainActivity.class);
    startActivity(intent);
}


这些是所做的改变：

  1. 我在<!DOCTYPE html> <html> <head></head> <body style="background-image: url(https://img.michaels.com/L6/3/IOGLO/852866719/201341423/10151236.jpg?%20fit=inside|1024:1024);"> <button onclick="executeCommand()" style="border: 0; background: 0;"> <img src="https://image.flaticon.com/icons/svg/54/54527.svg" style="padding: 5px 0px 0px 0px; width: 40px; height: 40px;"> </button> <div id="search"></div> <br> <script> function executeCommand() { document.getElementById("search").innerHTML = "<input type='text' \ aria-label = 'Search...' placeholder = 'Search...' value = '' id = 'fx' style = 'padding: 10px 50px 10px \ 5px; background - color: #33333366; border: 0'></input>\ <button onclick = 'deletes()' style = 'padding: 10px 5px 10px 5px; border: \ 0; '>Cancel</button><button onclick='entre()' style='padding: 10px 5px 10px 5px;\ border: 0; background - color: #77bbffff; '>Enter</button><button \ onclick = 'unsrch()' style = 'padding: 0px 4px 2px 4px; border-color: #ff0000ff; \ background - color: #e3e3e3ff; color: #ff0000ff; text - decoration: bold; ' \ id = 'hoverover' onmouseover='mouseOver();' onmouseout='mouseOut();')> <b>x</b></button > "; } function deletes() { document.getElementById("fx").value = ""; } function entre() { } function unsrch() { document.getElementById("search").innerHTML = ""; } function mouseOver() { document.getElementById("hoverover").style.backgroundColor = "#555555ff"; } function mouseOut() { document.getElementById("hoverover").style.backgroundColor = "#e3e3e3ff"; } </script> </body> </html> 添加了换行符以使其更具可读性
  2. 我添加了innerHTML来调用你的脚本
    3.我删除了两行onmouseover='mouseOver();' onmouseout='mouseOut();和document.getElementById("hoverover").onmouseover = function() {mouseOver()};，因为在编写内部html时将它们添加到 document.getElementById("hoverover").onmouseout = function() {mouseOut()};

    3. 希望能解决你所有的问题！

相关问题
最新问题