Onmouseout 事件不起作用答案

【问题标题】：Onmouseout event is not workingOnmouseout 事件不起作用
【发布时间】：2015-01-12 20:33:30
【问题描述】：

我有这个 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 上时，图像会发生变化，但是当我用鼠标离开时，图像保持不变。

提前谢谢你

【问题讨论】：

在 whiteImg 中尝试一个 alert() 看看它是否有效
测试了你的代码。这里没有问题。控制台有错误吗？

标签： javascript jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

尝试使用 div id。

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

【讨论】：

【解决方案3】：

这里有 jQUery 的解决方案：http://jsfiddle.net/vgmppkdg/1/ 和 .hover(whatIn,whatOut) 函数

HTML：

<div id="baloon_signup">
 <img src="images/prijavi.png" class="imageResponsive" />
</div>

JS：

var $baloon = $('#baloon_signup')

$baloon.hover(function(){
    $baloon.html('x<img src="images/prijaviH.png" class="imageResponsive" />');
}, function(){
    $baloon.html('y<img src="images/prijavi.png" class="imageResponsive" />');
});

【讨论】：

【解决方案4】：

试试下面的 JavaScript 代码。（没用过jQuery）

<div class="baloon_signup" onmouseover="pinkImg()" onmouseout="whiteImg()" >
<img id="animate" src="https://www.gstatic.com/android/market_images/web/play_logo_x2.png" class="imageResponsive" />

function pinkImg(){
 //alert('onmouseover');
    document.getElementById("animate").src = "https://www.google.com/images/errors/logo_sm_2.png";
}
function whiteImg(){
 //alert('onmouseout');
    document.getElementById("animate").src = "https://www.gstatic.com/android/market_images/web/play_logo.png";

http://jsfiddle.net/ovkyqqdo/

【讨论】：

【解决方案5】：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <title></title>
    <script>
        function pinkImg(x) {
            x.innerHTML = '<img src="http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg" class="imageResponsive" style="height:300px;width:300px" />';
            return false;
        }

        function whiteImg(x) {
            x.innerHTML = '<img src="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" class="imageResponsive" style="height:300px;width:300px" />';
            return false;
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="baloon_signup"  onmouseover="pinkImg(this);" onmouseout="whiteImg(this);">
    <img src="images/prijavi.png" class="imageResponsive" />
</div>

    </form>
</body>
</html>

【讨论】：