Response title
This is preview!
mouseOver & mouseOut problem
in Getting Started
•
13 years ago
Hi all,
it's my first post here, and I think there will follow many of them. I'm relative new to create my own jQuery scripts, but I realy wanna know how it works. Today, I tried to show an image when a user hovers another image. The big problem is: when I hover the picture and my cursor is still on it, the fadeIn and fadeOut of the second image keeps on looping. Do I have to do a callback function or is it something completely different? Here's my code:
XHTML:
Thanks a lot for the given answers and solution(s)!
it's my first post here, and I think there will follow many of them. I'm relative new to create my own jQuery scripts, but I realy wanna know how it works. Today, I tried to show an image when a user hovers another image. The big problem is: when I hover the picture and my cursor is still on it, the fadeIn and fadeOut of the second image keeps on looping. Do I have to do a callback function or is it something completely different? Here's my code:
XHTML:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Testsite</title>
<link rel="stylesheet" type="text/css" href="css/test.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div id="wrapper">
<img class="hover" src="images/blauw.jpg" />
<img class="hidden" src="images/rood.jpg" />
</div>
</body>
</html>
- #wrapper{
position: relative;
}
.hidden{
position: absolute;
display: none;
top: 0;
left: 0;
}
- #wrapper{
position: relative;
}
.hidden{
position: absolute;
display: none;
top: 0;
left: 0;
}
Thanks a lot for the given answers and solution(s)!
1
