从不同的元素触发 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 循环中拉出大量图像和标题。解决方案必须是 non-specific 元素的内容，以便在页面上重复时它会起作用。我阅读了一些有关将事件从一个元素绑定到另一个元素的内容，但无法使任何工作正常进行。想法？谢谢

更新：来自 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 从 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>

('myImage')后面的数字需要是页面上图片的数量，所以我把它设为class名称的图片数量（"length"名称为 class 的图像数量）。

Answer 2

尝试

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

在 span 的 onmouseover 中。

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>

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

Trigger onmouseover/onmouseout events from a different element

javascript

onmouseover

onmouseout