Javascript 如何修复鼠标上方的鼠标更改背景色_Javascript_Html

Javascript 如何修复鼠标上方的鼠标更改背景色

javascript html

Javascript 如何修复鼠标上方的鼠标更改背景色,javascript,html,Javascript,Html,我想固定鼠标，然后将鼠标移出，这样它就可以为div工作。正如你所看到的，它无法工作，我不知道为什么。我想在移动鼠标时将其更改为黄色，其他颜色应该是浅绿色。我做了很多，但对我来说不起作用。我怎么能用鼠标器将单div变为黄色，我怎么能用鼠标将其变为浅绿色？非常感谢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

我想固定鼠标，然后将鼠标移出，这样它就可以为div工作。正如你所看到的，它无法工作，我不知道为什么。我想在移动鼠标时将其更改为黄色，其他颜色应该是浅绿色。我做了很多，但对我来说不起作用。我怎么能用鼠标器将单div变为黄色，我怎么能用鼠标将其变为浅绿色？非常感谢

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title>exams</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            #style
            {
                background-color: #00FFFF;
                border-style: dotted;
            }
            #node2
            {
                background-color:#00FFFF;
                border-style: dashed;
            }
            #node3
            {
                background-color: #00FFFF;
                border-style: solid;
            }
            #node4
            {
                background-color: #00FFFF;
                border-style: ridge;

            }
            #node5
            {
                background-color: #00FFFF;
                border-style: inset;
            }
     #content {
        margin:500px;
        height: 800px;
        width: 2000px;
        background-color: red;
    }
    .fixed {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 200px;
      background-color: white;
    }
    .feedback {
        position: relative;
      width: 60px;
      }

    #mybutton {
         position: absolute;
      top: 10px;
      right: 10px;
      }
    }
    #mybutton2{
    position: absolute;
    top:30px;
    right:30px;

    }
        </style>
    </head>
    <body onload="myFunction()">
    <h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">

    <div style="width:300px; height:200px; overflow:auto; background-color:#00FFFF;">

            <span id="redText" style="color:red ">Red text for scroll test.</span>
            <div style="height:200px;"></div>
        </h1>


     <h2 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
        <div id="node2">keimeno1</div> </h2>
        <h3 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
            <div id="node3">keimeno2</div></h3>
            <h4 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
                <div id="node4">keimeno3</div><h4>
                <h5 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
                    <div id="node5">keimeno4</div>
                </div>
    </h5>






    <script>
    function myFunction() {
        alert("Page is loaded");
    }
    function mytimeFunction() {
        setInterval(function(){ alert("Hello"); }, 5000);
        timetrick();
    }

    function timetrick() {
                var elmnt = document.getElementById("content");
        elmnt.scrollIntoView();
    }
            }

    function mouseOver() {
        document.getElementById("demo").style.color = "yellow";
    }

    function mouseOut() {
        document.getElementById("demo").style.color = "aqua";
    }

    </script>
    <div id="mybutton">
    <button class="1">first button</button>
    </div>
    <div id="mybutton2">
    <button class="2">Second button</button>
    </div
    </body>
    </html>


考试
#风格
{
背景色：#00FFFF；
边框样式：虚线；
}
#节点2
{
背景色：#00FFFF；
边框样式：虚线；
}
#节点3
{
背景色：#00FFFF；
边框样式：实心；
}
#节点4
{
背景色：#00FFFF；
边缘样式：脊；
}
#点头5
{
背景色：#00FFFF；
边框样式：插图；
}
#内容{
利润率：500px；
高度：800px；
宽度：2000px；
背景色：红色；
}
.固定{
位置：固定；
底部：0；
右：0；
宽度：200px；
背景色：白色；
}
.反馈{
位置：相对位置；
宽度：60px；
}
#我的按钮{
位置：绝对位置；
顶部：10px；
右：10px；
}
}
#我的按钮2{
位置：绝对位置；
顶部：30px；
右：30px；
}
滚动测试的红色文本。
凯门诺1
凯门诺
凯门诺
keimeno4
函数myFunction（）{
警报（“页面已加载”）；
}
函数mytimeFunction（）{
setInterval（函数（）{alert（“Hello”）；}，5000）；
时间技巧（）；
}
函数timetrick（）{
var elmnt=document.getElementById（“内容”）；
elmnt.scrollIntoView（）；
}
}
函数mouseOver（）{
document.getElementById（“demo”）.style.color=“黄色”；
}
函数mouseOut（）{
document.getElementById（“demo”）.style.color=“aqua”；
}
第一个按钮
第二个按钮
要使功能正常工作，解决方案是更新脚本中的格式。很明显，它不会工作，因为脚本有大量语法错误。首先检查您的脚本块，您会发现您在timetrick函数之后添加了一个大括号，这会阻止mouseOver函数在运行时被定义。标题标签（h1，h2，…）也非常混乱。例如，在h5 endtag之前有一个额外的div endtag。此外，正如许多其他人已经说过的：删除“演示”id。它们是不必要的。并添加document.getElementById（“node2”）.style.color=“黄色”而不是演示部分。为身体中的每个节点复制函数内部的这些行。这应该足以使鼠标在上面正常工作。
类似的东西会有帮助吗

$（'.acqua'）.mouseover（函数（）{
$（'.acqua'）.css（'background-color'，'yellow'）；
});
$（'.acqua'）.mouseout（函数（）{
$（'.acqua'）.css（'background-color'，'aqua'）；
});
.acqua{
背景色：浅绿色；
填充：30px；
}

这里的一些文本
您知道您可以用代码创建一个吗？您的代码中有很多问题。看：请先修复这些。为什么你不只是用css来改变颜色？真的没有必要使用JavaScriptelementTagSelector:hover{background color:#FF0；}
伙计们，我有很多，但我只想关注这些，然后我会做另一个。我只关心mouseover mouseout现在很简单，不能有多个元素具有相同的id。一个房间里有100个叫Bob的人。你想要一个特定的鲍勃，但是当你大叫“嘿，鲍勃”却没有得到你想要的鲍勃时，你会感到惊讶。