onmouseout事件不工作

我有這個網站：onmouseout事件不工作

<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>

功能pinkImg這是觸發onmouseover事件工作正常，但whiteImg這是引發上onmouseout事件根本不起作用。我檢查了圖像路徑，它們是正確的。當我將鼠標懸停在div上時，圖像會發生變化，但是當我用鼠標圖像出去時保持不變。

謝謝您提前

來源

2015-01-12 user3100193

嘗試警報（）內whiteImg，看看它是否工作 –

測試你的代碼。這裏沒有問題。控制檯中的任何錯誤？ – Tyr

不改變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>

來源

2015-01-12 11:45:52 Tyr

謝謝:)））現在一切正常。 – user3100193

嘗試使用div id。

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

來源

2015-01-12 11:41:23 erakm

在這裏你必須使用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" />'); 
});

來源

2015-01-12 11:50:12

試試以下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/

來源

2015-01-12 12:01:30 shanidkv

<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>

來源

2015-01-12 12:33:30

onmouseout事件不工作

回答

相關問題