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>

（＆＃39; myImage＆＃39;）之后的数字需要是页面上图像的编号，所以我把它作为带有类名的图像数量（＆＃34;长度＆＃34;具有班级名称的图像。）

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>

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

3 个答案: