jQuery mouseenter mouse leave

У меня возникли проблемы с получением функции ввода мыши, оставляющей функциональность работы. Я знаю, что есть опция .hover, которую я могу взять, я хочу, чтобы мы работали с mouseenter/mouseleave, прежде чем я подхожу к этому.jQuery mouseenter mouse leave

Что я вижу, я открыл хром и проверяю img, он говорит, что файл src меняется, но я не вижу заметного изменения. Может кто-нибудь помочь пожалуйста

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 

    <script src="jquery-1.4.3.min.js" type="text/javascript"></script> 


</head> 
<body> 

      <img id="menuHome" src="m_home.gif" /> 
       <script type="text/javascript"> 

        $(document).ready(function() { 
         $("#menuHome").mouseenter(function() { 
          $(this).attr({ src: 'm_home_roll.gif' }); 
         }); 
         $("#menuHome").mouseleave(function() { 
          $(this).attr({ src: 'm_home.gif' }); 
         }); 
        }); 
    </script> 

</body> 
</html>

источник

2010-11-11 Anonymous

ли послал хром запрос HTTP, чтобы загрузить изображение? И вы уверены, что изображения разные? –

100% уверены, что изображения разные, на вкладке ресурсов после первоначального опрокидывания хром запрашивает m_home_roll.gif – 2010-11-11 20:35:37

В первый раз, когда я перевернул изображение, оно меняется, но в последующие моменты времени это не так. Если я обновляю страницу, я могу получить изображение для изменения, но снова, в последующие моменты он не изменится. – 2010-11-11 20:42:36

Возможно, это не причина, но вы могли бы попробовать это с немного другим синтаксисом?

$(document).ready(function() { 
    $("#menuHome").hover(function() { 
     this.src = 'm_home_roll.gif'; 
    }, function() { 
     this.src = 'm_home.gif'; 
    }); 
});

источник

2010-11-11 20:57:42 lonesomeday

пробовал с различным синтаксисом и не помогал. Мне нравится этот ситанкс лучше. Почему вам не нужно было включать $ (это)? – 2010-11-11 21:00:11

@ george9170 Внутри функции обработчика 'this' относится к элементу DOM. Вы можете выполнить jQuery-действия на нем, обернув его в '$()', но вы можете получить доступ к обычным методам и свойствам элементов Javascript на 'this'. Это всегда будет иметь лучшую производительность. – lonesomeday

Если вы уверены, УИР этих изображений является правильным и что вы ждете соответствующее количество времени, чтобы загрузить их, когда вы пролонгировать/скатываются (в первый раз, как правило, они кэшировать после этого) затем переключите $(document).ready() на $(window).load() и посмотрите, работает ли он лучше?

источник

2010-11-11 20:59:47

$ (окно) .load(), кажется, имеет такое же поведение $ (окно) .load ( функция() { $ ("# menuHome"). Парят (функция() { this.src = «m_home_roll .gif '; }, function() { this.src =' m_home.gif '; }); }); у кого-нибудь еще эта проблема с кодом выше? – 2010-11-11 21:05:06

Поскольку никто не изучил это, я рискну предположить. Как я прокомментировал OP, это может иметь какое-то отношение к событиям, которые становятся несвязанными после изменения источника. Чтобы проверить это, вы можете поместить точку останова или поместить оператор предупреждения в оба события. Всякий раз, когда вы совершаете опрокидывание и не появляется всплывающее предупреждение, это означает, что ваши события каким-то образом становятся несвязанными.

Учитывая, что, попробуйте:

$(document).ready(function() { 
    $("#menuHome").live('mouseenter', function() { 
     $(this).attr({ src: 'm_home_roll.gif' }); 
    }); 
    $("#menuHome").live('mouseleave', function() { 
     $(this).attr({ src: 'm_home.gif' }); 
    }); 
});

, чтобы увидеть, если он readding элемент в DOM. Если это не сработает, попробуйте:

function enter() { 
    $(this).attr({ src: 'm_home_roll.gif' }); 
    readd(); 
} 
function leave() { 
    $(this).attr({ src: 'm_home.gif' }) 
    readd(); 
} 

// can't refer to function handler while inside function 
function readd(elem) { 
    $('#menuHome').unbind().mousenter(enter).mouseleave(leave); 
} 

$(document).ready(function() { 
    $("#menuHome").mouseenter(enter).mouseleave(leave); 
});

источник

2010-11-11 21:34:32 shoebox639

Лучшим способом протестировать это будет использование 'delegate': $ (document.body) .delegate ('# menuHome', 'mouseenter', function() {this.src = 'm_home_roll.gif';}). Delegate ('#menuHome', 'mouseleave', function() {this.src = 'm_home.gif';}); ' – lonesomeday

lol Мне пришлось искать разницу между живыми и делегатами. Я считаю, что они оба действительны здесь. – shoebox639

У меня была аналогичная проблема с Chrome я думаю, я, кажется, помню, используя mouseover и mouseout вместо этого. Так что-то вроде этого:

$(document.ready(function() { 
    $('#menuHome') 
     .mouseover(function() { 
      $(this).attr({src: 'm_home_roll.gif'}); 
     }) 
     .mouseout(function() { 
      $(this).attr({src: 'm_home.gif'}); 
     }); 
});

Там также нет необходимости, чтобы выбрать элемент в два раза (следовательно, единственная $('#menuHome') линия).

источник

2010-11-17 11:57:13

Да, мне кажется, что «mouseenter» и «mouseleave» могут быть специфическими для Internet Explorer: http://stackoverflow.com/questions/1104344/what-is-the-difference-between-the-mouseover-and- MouseEnter-событие – Tom

Я не знаю, если вы открыты для изменения структуры кода, но я бы закодировать что-то вроде следующего:

<script type="text/javascript"> 
$(document).ready(function(){` 
    $('#rolloverImg').html("<img src=\"...\">");` 

    $('#rolloverImg').hover(function(event){ 
     $(this).html("<img src=\"...new src...\">"); 
    }, function(event){ 
     $(this).html("<img src=\"...old src...\">"); 
    }); 
}); 
</script> 

.... 
<div id="rolloverImg"></div>

источник

2010-11-17 20:02:53

jQuery mouseenter mouse leave

ответ

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