javascript - Onmouseout 事件不起作用

Question

我有这个 html:

<div class="baloon_signup"  onmouseover="pinkImg(this)" onmouseout="whiteImg(this)">
    <img src="images/prijavi.png" class="imageResponsive" />
</div>

这个 javascript 函数:

<script>
function pinkImg(x) 
    {
    x.innerHTML = '<img src="images/prijaviH.png" class="imageResponsive" />';
    }

function whiteImg(x) 
    {
    x.innerHTML = '<img src="images/prijavi.png" class="imageResponsive" />';
    }
</script>

在 onmouseover 事件上触发的函数 pinkImg 工作正常，但在 onmouseout 事件上触发的 whiteImg 根本不工作。我检查了图像路径，它们是正确的。当我将鼠标悬停在 div 上时，图像会发生变化，但是当我用鼠标离开时，图像会保持不变。

提前致谢

Answer 1

无需更改 div 的 innerHTML，只需更改图像元素本身的 src。

也许您的 div 比图像大，导致您的 onmouseout 事件没有被触发。使用您的示例代码，div 的默认宽度为 100%。

试试这个包含 jQuery 的示例代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="baloon_signup"  onmouseover="pinkImg()" onmouseout="whiteImg()">
    <img src="http://www.clker.com/cliparts/1/5/4/b/11949892282132520602led_circle_green.svg.thumb.png" class="imageResponsive" />
</div>

<script>
function pinkImg() {
    $('.imageResponsive').attr('src', 'http://www.clker.com/cliparts/5/7/b/5/1194989231691813435led_circle_red.svg.thumb.png');
}

function whiteImg() {
    $('.imageResponsive').attr('src', 'http://www.clker.com/cliparts/1/5/4/b/11949892282132520602led_circle_green.svg.thumb.png');
}
</script>