当我将鼠标悬停在取消栏上时，它不会执行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>
答案 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);
}
这些是所做的改变：
<!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>
添加了换行符以使其更具可读性innerHTML来调用你的脚本onmouseover='mouseOver();' onmouseout='mouseOut();和document.getElementById("hoverover").onmouseover = function() {mouseOver()};，因为在编写内部html时将它们添加到
document.getElementById("hoverover").onmouseout = function() {mouseOut()}; 希望能解决你所有的问题！