onmouseover 在 chrome 中不起作用？

Question

我正在尝试创建一个旋转木马，其中每个图像都有一个 onmouseover 来更改图像，使用来自 W3 学校的这段代码，但由于某种原因，图片没有改变

<div class="carousel-inner top-right" role="listbox">
    <div class="item active">
      <a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
      onmouseout="document.getElementById('Photo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
      <img src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="1" />
    </a>
  </div>

这是相同的，只是轮播所有项目的图像名称发生了变化。任何人都知道为什么会这样，顺便说一句，我已经尝试过另一个 post

的 getElement

编辑：所以我更改了图像的 ID，新代码为 `
这仍然不起作用，所以我这样做了

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
      onmouseout="document.getElementById('Photo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
      <img  src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="Photo1" />
    </a>
  </div>

这仍然不起作用，可能是因为没有 PhotoInfo1 的标签，所以我这样做了：

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
      onmouseout="document.getElementById('Photo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
      <img  src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="Photo1" />
      <img  src="/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg" id="PhotoInfo1" />
    </a>
  </div>

现在显示了 2 张图片，其中一张在滚动时发生变化但在鼠标移开时没有变化，而第二张没有变化。我也试过为第二张图片在其他地方分配一个 ID，但这不会改变情况。

我现在该怎么办？

我只是在尝试一些随机的事情，我发现当我使用这段代码时：

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
      onmouseout="document.getElementById('Photo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
      <img src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="PhotoInfo1" />
    </a>
  </div>

我将照片从 photo1 更改为 photoinfo1（实际照片不是 ID），但没有切换回 photo1。所以发生的事情是我在页面加载时看到 photo1，在我将鼠标放在它上面之后它会更改为第二张图片，但当我滚动时不会切换回第一张。

为什么现在会这样？

好的，这是让它工作的代码（有点像自由落体运动员所说的那样），但我仍然对为什么会发生这种情况感到困惑，你能进一步解释一下吗？

<div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
      onmouseout="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
      <img src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="PhotoInfo1" />
    </a>
  </div>

Answer 1

在我看来您引用了错误的元素 - 您的 link 引用了 ID 'PhotoInfo1' 和 'Photo1' 而您尝试更改的 img 的 ID 是"1".

试试这个：

<div class="carousel-inner top-right" role="listbox">
    <div class="item active">
        <a href="#" onmouseover="document.getElementById('1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';" onmouseout="document.getElementById('1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
        <img src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="1" />
        </a>
    </div>
</div>

希望对您有所帮助

Answer 2

您在 mouseover 和 mouseout 处理程序的 document.getElementById 中寻找不同的元素。您的 mouseout 代码找不到名为 Photo1.

的元素

将 mouseout 更改为使用 PhotoInfo1 而不是 Photo1。

即改变这个...

<a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
  onmouseout="document.getElementById('Photo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">

为此（^^^ 向您展示了变化）...

<a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
  onmouseout="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
                                       ^^^^^^^^^^

onmouseover 在 chrome 中不起作用？

onmouseover not working in chrome?

html

onmouseover