jquery mouseenter mouse leave
I am having trouble getting the moues enter mouse leave functionality work. I know there is a .hover option I can take, I want to get the mouseenter/mouseleave working before i go up to that.
What i am seeing is, I have chrome opened up and am inspecting the img, it says that the src file is changing but i am not seeing a noticable change. Can someone help please
<%@ 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>
I had a similar problem with Chrome I think, I seem to remember using mouseover and mouseout instead. So something like this:
$(document.ready(function() {
$('#menuHome')
.mouseover(function() {
$(this).attr({src: 'm_home_roll.gif'});
})
.mouseout(function() {
$(this).attr({src: 'm_home.gif'});
});
});
There is also no need to select the element twice (hence the single $('#menuHome') line).
This probably isn't the reason but could you try this with slightly different syntax?
$(document).ready(function() {
$("#menuHome").hover(function() {
this.src = 'm_home_roll.gif';
}, function() {
this.src = 'm_home.gif';
});
});
If you're certain the uri of those images is correct AND that you're waiting an appropriate amount of time to load them when you roll over / roll off (the first time, usually they cache after that) then switch $(document).ready() to $(window).load() and see if it works better?
Since no one has explored this, I'll venture a guess. As I commented to the OP, it might have something to do with the events getting unbind after you change source. To verify this, you can put a break point or put an alert statement in both events. Whenever you rollover and there's no alert popping up, that means your events are getting unbound somehow.
Given that, try:
$(document).ready(function() {
$("#menuHome").live('mouseenter', function() {
$(this).attr({ src: 'm_home_roll.gif' });
});
$("#menuHome").live('mouseleave', function() {
$(this).attr({ src: 'm_home.gif' });
});
});
to see if it's readding the element to the DOM. If that doesn't work, try:
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);
});
I don't know if you are open to a code structure change, but I would code something like the following:
<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>
加载中,请稍侯......
精彩评论