Question

我希望修复鼠标悬停和鼠标移除所以它可以为div工作。你可以看到它无法工作，我不知道为什么。我想这样做当我移动鼠标将其更改为黄色，另一个颜色应该是浅绿色的。我做了很多，但它并没有为我工作。如何通过mouserover做单个div是黄色的，我怎么能用鼠标来做它aqua？非常感谢

 <!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>

Answer 1

您的功能解决方案是更新脚本中的格式。很明显它不会起作用，因为脚本有很多语法错误。首先检查你的脚本块，你会发现你在timetrick func之后添加了一个单独的大括号，这可以防止mouseOver func在运行时被定义。标题标签（h1，h2，...）也非常混乱。例如，在h5 endtag之前有一个额外的div endtag。此外，正如许多其他人已经说过的那样：删除＆＃39;演示＆＃39; ID＆＃39; S。它们是不必要的。并添加document.getElementById("node2").style.color = "yellow";而不是演示部分。在函数内部为您身体中的每个节点复制这些行。这应该足以使鼠标悬停正常工作。

Answer 2

这样的事可能会有所帮助吗？

$('.acqua').mouseover(function() {
  $('.acqua' ).css('background-color','yellow');
});
	
$('.acqua').mouseout(function() {
  $('.acqua' ).css('background-color','aqua');
});

	.acqua{
		background-color: aqua;
		padding: 30px;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="acqua">Some text here</div>

如何修复那些mouseover-mouseout更改背景颜色

2 个答案: