Onmouseout событие не работает

У меня есть этот HTML: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

Вместо изменения внутреннегоHTML div просто измените 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 событие не работает

ответ

Смежные вопросы