Question

我已经工作了几个小时试图完成实验的最后一部分。我要做的是让我的网页显示两个不同名称的图像文件，当我将鼠标悬停在某个功能上时更改图像。当我将鼠标悬停在第一张图像上时，它应该变为辐射标志，当我将鼠标悬停在第二张图像上时，它应该变为生物危害标志。每当我将鼠标移离其中一个图像时，图像应该变回问号。我想我知道如何使用相同的函数来处理多个事件处理程序;问题是我不知道如何使用相同的功能将图像（在鼠标悬停时）更改为基于我的鼠标悬停在哪个图像上的不同图像;我不知道如何使函数检查onmouseover正在应用哪个图像。

我自然会假设我会为此使用if语句，但无论我做什么，我似乎无法获得区分图像的功能。似乎总是想要使用我列出的第一张图片。现在它的工作原理与我想要的完全一样，除了两个图像在鼠标悬停时都变为相同的东西。

这是我对函数页面的代码（可能出现问题的地方）：

function changePic_onmouseover()
{
 if(document.images[0].onmouseover)
 {
  this.src = "02-Radiation.jpg";
 }
 else if(document.images[1].onmouseover)
 {
  this.src = "03-Biohazard.jpg";
 }
}
function changePic_onmouseout()
{
 if(document.images[0].onmouseout)
 {
  this.src = "01-Question.jpg";
  return true;
 }
 else if(document.images[1].onmouseout)
 {
  this.src = "01-Question.jpg";
  return true;
 }

}

这是我添加了具有对象属性的事件处理程序的正文脚本：

document.images[0].onmouseover = changePic_onmouseover;
document.images[0].onmouseout = changePic_onmouseout;
document.images[1].onmouseover = changePic_onmouseover;
document.images[1].onmouseout = changePic_onmouseout;

可能不是最简单的方法，但我需要这样设置。

Answer 1

既然你说你需要像这样构建它，我不会提到不使用这种方法的任何理由，并尝试直接回复你的问题。

这一行：

if(document.images[0].onmouseover)

只是测试“如果文档中的第一个图像有任何类型的鼠标悬停定义”并且与当前正在执行的函数无关

如果你想告诉你是否正在调用执行元素，因为你正在使用直接附加的处理程序（而不是事件委托），你可以检查“this”：

if(this == document.images[0])

或者，您可以针对事件目标进行测试，但这需要一个小的crossbrowser chicanery ...这样的事情会起作用

function changePic_onmouseover(e) {
if(!e) e = window.event;
var target = e.target || e.srcElement;
if(target == document.images[0]) // do stuff

Answer 2

你在这条线上实际做了什么：

if(document.images[0].onmouseover)

检查onmouseover属性是否具有evalutes为true的值。正如您为其分配了一个事件，它将始终评估为真。

您可能希望比较当前元素以确定它是什么：

if(document.images[0] == this)

当您分配事件时，您知道它是哪个元素，所以我会发现为每个事件设置单独的函数比尝试在事件发生时找出要使用的图像更容易：

document.images[0].onmouseover = function(){ this.src = '02-Radiation.jpg'; };
document.images[0].onmouseout = function(){ this.src = '01-Question.jpg'; };
document.images[1].onmouseover = function(){ this.src = '03-Biohazard.jpg'; };
document.images[1].onmouseout = function(){ this.src = '01-Question.jpg'; };

Answer 3

如何仅使用css和：hover属性来更改背景图像？

exemple

你真的需要用js来做这件事吗？ =）祝你好运

使用一个功能在鼠标悬停时显示2个不同的图像（每个图像的替代图像）

3 个答案: