Question

<html>
    <head>
        <script>
            function show_function() {
                var example_image=document.getElementById("example_image");
                example_image.src="example_one.png";
            }
            function hide_function() {
                var example_image=document.getElementById("example_image");
                example_image.src="example.png";
            }
        </script>
    </head>
<body>
    <div class="one" onmouseover="show_function()" onmouseout="hide_function()">
        <img id="example_image" src="example.png">
    </div>
    <div class="two" onmouseover="show_function()" onmouseout="hide_function()">
        <img id="example_image" src="example.png">
    </div>
</body>
</html>

当我将鼠标悬停在第一个div上时，图像会发生变化。但是当我将鼠标悬停在第二个div上时，第一个div的图像也会改变。

有没有人知道如何只在javascript中做到这一点？

Answer 1

像达科说的那样，身份证必须是独一无二的。下一步是将变量插入到您的函数中：

<html>
<head>
<script>
function show_function(id, hide)
{
    var example_image=document.getElementById(id);

    if(hide){
    example_image.src="example.png";
    } else{
    example_image.src="example_one.png";
    }
}
</script>
</head>
<body>
<div class="one" 
onmouseover="show_function('example_image1')" 
onmouseout="show_function('example_image1', true)" />
<img id="example_image1" src="example.png">
</div>
<div class="one" 
onmouseover="show_function('example_image2')" 
onmouseout="show_function('example_image2', true)" />
<img id="example_image2" src="example.png">
</div>
</body>
</html>

或者你也可以这样：

<img src="example.png" 
onmouseover="this.src='example_one.png';" 
onmouseout="this.src='example.png';" />

希望它有所帮助！

Answer 2

你可以这样做：

show_function = function (container) {
    container.childNodes[1].src = "example_one.png";
}
hide_function = function (container) {
    container.childNodes[1].src = "example.png";
}

然后在HTML中，将this传递给函数：

<div class="one" onmouseover="show_function(this)" onmouseout="hide_function(this)">
    <img id="example_image" src="example.png">
</div>
<div class="two" onmouseover="show_function(this)" onmouseout="hide_function(this)">
    <img id="example_image" src="example.png">
</div>

Answer 3

我想你想要div的第一个子节点[0]。并将悬停的对象传递给回调。

function show(e){ 
  document.getElementById('label').innerHTML = e.children[0].id;
  e.style.border = "solid 2px red";
  } 

function hide(e){ 
  
  e.style.border = "0";
  
  }

<div class="one" onmouseover="show(this)" onmouseout="hide(this)">
<img id="example_image" src="example.png" class="one" >
</div>
<div class="two" onmouseover="show(this)" onmouseout="hide(this)">
<img id="example_image" src="example.png" class="two">
</div>
<p id='label' ></p>

如何在多个元素上使用onmousehover事件？

3 个答案: