javascript - 为什么我的 img 悬停不起作用？

Question

我想在 on.hover 时更改下一个 && 上一个 img。

我尝试过使用 JS，但似乎不起作用。

PS:我为上一个和下一个尝试了不同的方法

HTML

<div align='center'>
  <a href='#'>
    <img class='img-responsive pull-left'  
         src='images/arrow_left.jpg' 
         onmouseover='hover(this);' 
         onmouseout='unhover(this);'> </a>
  <ul class='pagination'>
    <li><a href='#'> 1 </a></li>
    <li><a href='#'> 2 </a></li>
    <li><a href='#'> 3 </a></li>
    <li><a href='#'>view all</a></li>
  </ul>
  <a href='#'>
    <img class='img-responsive pull-right' 
         src='images/arrow_right.jpg'  onmouseover='this.src='images/arrow_rightover.jpg'
                                                                                         onmouseout='this.src='images/arrow_right.jpg'> </a>
</div>

JS函数

function hover(element) {
element.setAttribute('src', 'images/arrow_leftover.jpg');
}

function unhover(element) {
element.setAttribute('src', 'images/arrow_left.jpg');
}

Answer 1

替换:

onmouseover='this.src='images/arrow_rightover.jpg' onmouseout='this.src='images/arrow_right.jpg'>

致:

onmouseover='this.src="images/arrow_rightover.jpg"' onmouseout='this.src="images/arrow_right.jpg"'>

因为浏览器“认为”该属性的值只是 this.src=