从其他元素触发onmouseover / onmouseout事件

Question

任何想法如何（或如果可能）触发相邻元素的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>

Answer 1

为图像指定一个ID，并使用该ID来引用跨度中的图像。

<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>

（'myImage'）之后的数字必须是页面上图像的编号，因此我将其作为具有类名的图像的数量（具有类名的图像的“长度”）。

Answer 2

尝试

this.parentNode.querySelectorAll('img')[0].src='new.png'

在跨度的鼠标悬停中。

Answer 3

尝试使用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>