Javascript 从不同元素触发onmouseover/onmouseout事件

任何关于如何（或者如果可能）为相邻元素触发onmouseover/onmouseout事件的想法。例如

<div>
     <img src="image.jpg" onmouseover="this.src='image-alt.jpg'" onmouseout="this.src='image.jpg'">
     <span>Title</span>
</div>

标题

当我悬停在跨度上时，如何触发跨度上方图像的图像交换。CSS不起作用，因为这是一个Wordpress循环，拉着一个巨大的图像和标题列表。解决方案必须是非特定于某个元素的东西，因此当在页面上重复此操作时，它将起作用。我读了一些关于将事件从一个元素绑定到另一个元素的文章，但是没有任何东西可以工作。思想？谢谢

更新：Wordpress循环中的实际代码

<li>
<div class="container1">
    <div class="container2">
        <a href="<?php the_permalink(); ?>">
            <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" onmouseover="this.src='<?php echo $imageover['url']; ?>'" onmouseout="this.src='<?php echo $image['url']; ?>'">
            <span><?php the_title(); ?></span>
        </a>
    </div>
</div>
</li>

为图像提供一个id，并使用该id从span中引用图像

<div>
     <img src="image.jpg" id="myImage">
     <span onmouseover="document.getElementById('myImage').src='image-alt.jpg'" onmouseout="document.getElementById('myImage').src='image.jpg'">Title</span>
</div>

标题

编辑：只是阅读它必须是非特定的。您可以尝试getElementsByClassName

<div>
     <img src="image.jpg" class="myImage">
     <span onmouseover="document.getElementsByClassName('myImage')[document.getElementsByClassName('myImage').length-1].src='image-alt.jpg'" onmouseout="document.getElementsByClassName('myImage')[document.getElementsByClassName('myImage').length-1].src='image-alt.jpg'" .src='image.jpg'">Title</span>
</div>

试一试

在span的onmouseover中。
尝试使用
nextElementSibling
。在这里，它正在更改其旁边跨度中的标题：

<div>
   <img src="image.jpg" onmouseover="this.src='image-alt.jpg';this.nextElementSibling.innerHTML = 'New Title'" onmouseout="this.src='image.jpg';this.nextElementSibling.innerHTML = 'Old Title'">
   <span>Title</span>
</div>


标题

编辑：
为了回应我的答案是反向的这一事实，下面是如何在悬停标题时更改图像：

<div>
   <img height="200" src="image.jpg">
   <span onmouseover="this.previousElementSibling.src='image-alt.jpg'" onmouseout="this.previousElementSibling.src='image.jpg'">Title</span>
</div>


标题
如果在一页上重复多次，这是行不通的，是吗？这里回答的问题几乎相同：我一读就编辑我的答案。迪耶瓦拉的解决方案可能是另一个答案，几乎可以了。它正在触发，但所有跨距都将触发页面上的最后一个图像。我还尝试了diyevala页面上的解决方案-没有一个有效（不知道为什么，对我来说是有意义的）。用更多的html更新你的问题，有人会找到解决方案。这是正确的想法，但不知何故是错误的。
span
需要有
onmouseover
，这反过来会切换image.src。
<div>
   <img height="200" src="image.jpg">
   <span onmouseover="this.previousElementSibling.src='image-alt.jpg'" onmouseout="this.previousElementSibling.src='image.jpg'">Title</span>
</div>