Question

我目前正在开发一种小型的html游戏。以下是我的代码：

$item = ($item ?? 0) + 1;

问题是，当我将光标放在上面时，只有最后编码的项目（此处为<div id="BS"> <img style="position:absolute; top:375px; left:500px; width:176px; height:286px;" onmouseover="mouseOver()" src="Pictures/BS1.png"/> </div> <script type="text/javascript"> function mouseOver() { document.getElementById("BS").innerHTML = '<img style="position:absolute; top:375px; left:500px; width:176px; height:286px;" src="Pictures/BS2.png" onmouseout="mouseOut()"/>'; } function mouseOut() { document.getElementById("BS").innerHTML = '<img style="position:absolute; top:375px; left:500px; width:176px; height:286px;" src="Pictures/BS1.png" onmouseover="mouseOver()"/>'; } </script> <div id="Radio"> <img style="position:absolute; top:478px; left:768px; width:101px; height:71px;" onmouseover="mouseOver()" src="Pictures/radio1.png"/> </div> <script type="text/javascript"> function mouseOver() { document.getElementById("Radio").innerHTML = '<img style="position:absolute; top:478px; left:768px; width:101px; height:71px;" src="Pictures/radio2.png" onmouseout="mouseOut()"/>'; } function mouseOut() { document.getElementById("Radio").innerHTML = '<img style="position:absolute; top:478px; left:768px; width:101px; height:71px;" src="Pictures/radio1.png" onmouseover="mouseOver()"/>'; } </script>）正常工作。所以我想知道，有没有办法解决这个问题？因为我确实计划至少再放两个元素...... 谢谢，保罗

Answer 1

您同时拥有两个函数名mouseOver和mouseOut，因此第二次创建它时，您将覆盖第一个函数。如果您将它们命名为mouseBsOver和mouseRadioOver，那么就这样指定它们，它会起作用。

<div id="BS">
    <img style="position:absolute; top:375px; left:500px; width:176px; height:286px;" onmouseover="mouseBsOver()" src="Pictures/BS1.png"/>
</div>
<script type="text/javascript">
        function mouseBsOver() {
            document.getElementById("BS").innerHTML = '<img style="position:absolute; top:375px; left:500px; width:176px; height:286px;" src="Pictures/BS2.png" onmouseout="mouseOut()"/>';
            }
        function mouseBsOut() {
            document.getElementById("BS").innerHTML = '<img style="position:absolute; top:375px; left:500px; width:176px; height:286px;" src="Pictures/BS1.png" onmouseover="mouseOver()"/>';
        }
</script>

<div id="Radio">
    <img style="position:absolute; top:478px; left:768px; width:101px; height:71px;" onmouseover="mouseRadioOver()" src="Pictures/radio1.png"/>
</div>
<script type="text/javascript">
        function mouseRadioOver() {
            document.getElementById("Radio").innerHTML = '<img style="position:absolute; top:478px; left:768px; width:101px; height:71px;" src="Pictures/radio2.png" onmouseout="mouseOut()"/>';
            }
        function mouseRadioOut() {
            document.getElementById("Radio").innerHTML = '<img style="position:absolute; top:478px; left:768px; width:101px; height:71px;" src="Pictures/radio1.png" onmouseover="mouseOver()"/>';
        }
</script>

Answer 2

它的工作方式

function bigImg(x) {
    x.style.height = "64px";
    x.style.width = "64px";
}

function normalImg(x) {
    x.style.height = "32px";
    x.style.width = "32px";
}

<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">

或者你可以采取另一种方式

<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>

mouseOver（）和multiples元素出了点问题

2 个答案: