觸發來自不同元素的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事件

回答

相關問題