Javascript - OnMouseOut事件不适用于第一个li元素

Question

我正在尝试在我的项目中使用onmouseover和onmouseout事件。
事件有效，但我有问题，我不明白为什么会这样。
我有几个<li>元素，当我mousehover和onmouseout更改为原始图像时，我可以更改图像。
但是对于<li>事件中的第一个onmouseout元素，它不会被触发，只会在onmousehover事件上触发。
我用一个警告框进行了测试，并且除了第一个没有警告框之外。
知道发生了什么吗？
提前致谢。
这是我的代码。

@{x=0;}

<ul>
         @foreach (var p in ViewBag.In)
          {                                 
              <li>             
                  <form action="" method="post">
                      <button type="submit" name="submit"
                          onmouseover="document.getElementById('@("icon" + x.ToString())').src = '@p.IconHover';"
                          onmouseout="document.getElementById('@("icon" + x.ToString())').src = '@p.Icon';">

                         <img src="@p.Icon" id="@("icon" + x.ToString())"/>

                      </button>

                 </form>
              </li>
              x = x + 1;
          } 
    </ul>

我想我知道问题所在：

document.getElementById('icon0').src=' /Content/Images_BD/Icons/Interaction/appbar.logo.png';

只有该行在src中有空格。

其他li元素在源路径中没有空间..我该如何修复它？