触发来自不同元素的onmouseover/onmouseout事件

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

来源

2016-03-02 mcseay

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

来源

2016-03-02 21:48:16

这有正确的想法，但以某种方式错误的方式。 'span'需要有'onmouseover'，这反过来会切换image.src。 – diynevala

给图像的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”）的数目必须是页面上的图像的数量，所以我把它（与类名的图像的数量的与类的图像的“长度”名称）。

来源

2016-03-02 21:32:45 tomysshadow

在页面上重复多次时，这不起作用，是不是？ – mcseay

这里几乎是相同的问题回答：http://stackoverflow.com/questions/14439753/javascript-select-parent-elements-child – diynevala

我一读到它就编辑了我的答案。 diyevala的解决方案可能是一个替代答案。 – tomysshadow

尝试

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

跨度中的的onmouseover。

来源

2016-03-02 21:43:06 diynevala

触发来自不同元素的onmouseover/onmouseout事件

回答

相关问题