我遇到了一个奇怪的问题，我有多个链接，当您将鼠标悬停在这些链接上时，它会打开一个对话框 ui。问题是当我将鼠标悬停在第一个链接上，然后没有悬停在任何其他链接上时，我将鼠标悬停在文档的最后一个链接上，浏览器将我置于第一页视图的最后一个链接（或第一页折叠的位置）。知道我搞砸了什么。这是完整的代码。
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Dialog: Position relative to mouse event</title>
<!-- jQuery UI | http://jquery.com/ http://jqueryui.com/ http://jqueryui.com/docs/Theming -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif} li.nostyle{list-style-type: none;}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<style type="text/css">
code { font-size: 2em; }
</style>
</head>
<body>
<h1>Placing dialog box next to mouse hover07</h1>
<a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test07.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>
<div class="dialog" title="jQuery UI Dialog1" style="display:none">
<div style="width: 50%; float:left;">
<div class="rs-slideshow">
<div class="slide-container">
<img src="/images/working.gif"
alt="The first image in a slideshow demo." title="This is the first slide" />
</div>
<ol class="slides">
<li class="nostyle">
<a href="/productimagesh/test07.jpg"/></a>
</li>
</ol>
</div>
</div>
<div style="width: 50%; float:left; text-align:center;">
<p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1>Placing dialog box next to mouse hover02</h1>
<a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test02.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>
<div class="dialog" title="jQuery UI Dialog2" style="display:none">
<div style="width: 50%; float:left;">
<div class="rs-slideshow">
<div class="slide-container">
<img src="/images/working.gif"
alt="The first image in a slideshow demo." title="This is the first slide" />
</div>
<ol class="slides">
<li class="nostyle">
<a href="/productimagesh/test02.jpg"/></a>
</li>
</ol>
</div>
</div>
<div style="width: 50%; float:left; text-align:center;">
<p style="padding: 20px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1>Placing dialog box next to mouse hover03</h1>
<a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test03.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>
<div class="dialog" title="jQuery UI Dialog2" style="display:none">
<div style="width: 50%; float:left;">
<div class="rs-slideshow">
<div class="slide-container">
<img src="/images/working.gif"
alt="The first image in a slideshow demo." title="This is the first slide" />
</div>
<ol class="slides">
<li class="nostyle">
<a href="/productimagesh/test03.jpg"/></a>
</li>
</ol>
</div>
</div>
<div style="width: 50%; float:left; text-align:center;">
<p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1>Placing dialog box next to mouse hover04</h1>
<a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test04.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>
<div class="dialog" title="jQuery UI Dialog2" style="display:none">
<div style="width: 50%; float:left;">
<div class="rs-slideshow">
<div class="slide-container">
<img src="/images/working.gif"
alt="The first image in a slideshow demo." title="This is the first slide" />
</div>
<ol class="slides">
<li class="nostyle">
<a href="/productimagesh/test04.jpg"/></a>
</li>
</ol>
</div>
</div>
<div style="width: 50%; float:left; text-align:center;">
<p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1>Placing dialog box next to mouse hover04</h1>
<a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test04.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>
<div class="dialog" title="jQuery UI Dialog2" style="display:none">
<div style="width: 50%; float:left;">
<div class="rs-slideshow">
<div class="slide-container">
<img src="/images/working.gif"
alt="The first image in a slideshow demo." title="This is the first slide" />
</div>
<ol class="slides">
<li class="nostyle">
<a href="/productimagesh/test04.jpg"/></a>
</li>
</ol>
</div>
</div>
<div style="width: 50%; float:left; text-align:center;">
<p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1>Placing dialog box next to mouse hover04</h1>
<a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test04.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>
<div class="dialog" title="jQuery UI Dialog2" style="display:none">
<div style="width: 50%; float:left;">
<div class="rs-slideshow">
<div class="slide-container">
<img src="/images/working.gif"
alt="The first image in a slideshow demo." title="This is the first slide" />
</div>
<ol class="slides">
<li class="nostyle">
<a href="/productimagesh/test04.jpg"/></a>
</li>
</ol>
</div>
</div>
<div style="width: 50%; float:left; text-align:center;">
<p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1>Placing dialog box next to mouse hover04</h1>
<a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test04.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>
<div class="dialog" title="jQuery UI Dialog2" style="display:none">
<div style="width: 50%; float:left;">
<div class="rs-slideshow">
<div class="slide-container">
<img src="/images/working.gif"
alt="The first image in a slideshow demo." title="This is the first slide" />
</div>
<ol class="slides">
<li class="nostyle">
<a href="/productimagesh/test04.jpg"/></a>
</li>
</ol>
</div>
</div>
<div style="width: 50%; float:left; text-align:center;">
<p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1>Placing dialog box next to mouse hover04</h1>
<a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test04.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>
<div class="dialog" title="jQuery UI Dialog2" style="display:none">
<div style="width: 50%; float:left;">
<div class="rs-slideshow">
<div class="slide-container">
<img src="/images/working.gif"
alt="The first image in a slideshow demo." title="This is the first slide" />
</div>
<ol class="slides">
<li class="nostyle">
<a href="/productimagesh/test04.jpg"/></a>
</li>
</ol>
</div>
</div>
<div style="width: 50%; float:left; text-align:center;">
<p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1>Placing dialog box next to mouse hover04</h1>
<a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test04.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>
<div class="dialog" title="jQuery UI Dialog2" style="display:none">
<div style="width: 50%; float:left;">
<div class="rs-slideshow">
<div class="slide-container">
<img src="/images/working.gif"
alt="The first image in a slideshow demo." title="This is the first slide" />
</div>
<ol class="slides">
<li class="nostyle">
<a href="/productimagesh/test04.jpg"/></a>
</li>
</ol>
</div>
</div>
<div style="width: 50%; float:left; text-align:center;">
<p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1>Placing dialog box next to mouse hover51</h1>
<a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesz/tn_test51.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>
<div class="dialog" title="jQuery UI Dialog2" style="display:none">
<div style="width: 50%; float:left;">
<div class="rs-slideshow">
<div class="slide-container">
<img src="/images/working.gif"
alt="The first image in a slideshow demo." title="This is the first slide" />
</div>
<ol class="slides">
<li class="nostyle">
<a href="/productimagesz/is_test51.jpg"/></a>
</li>
</ol>
</div>
</div>
<div style="width: 50%; float:left; text-align:center;">
<p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
</div>
</div>
<script>
var dlg = $('div.dialog').dialog({
autoOpen: false,
draggable: false,
resizable: false,
width: 600,
/*buttons: {
"Ok": function(){ $(this).dialog("close"); }
},*/
});
var count1 = $('div').filter('.rs-slideshow').length;
count1--;
$('a.a1').mouseover(function() {
dlg.eq($('a.a1').index(this)).dialog('open');
$(".rs-slideshow:eq(" + count1 + ")").rsfSlideshow('startShow');
}).mousemove(function(event) {
dlg.dialog('option', 'position', {
my: 'left top',
at: 'right bottom',
of: event,
offset: '20 20'
});
}).mouseout(function() {
$(".rs-slideshow").rsfSlideshow('stopShow');
dlg.dialog('close'); scrollTo(0, jQuery("body"));
});
$(document).ready(function () {
$(".rs-slideshow").rsfSlideshow({
interval: 0,
transition: 0,
loop: false,
autostart: false
});
});
$(".ui-dialog-titlebar").hide();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://github.com/reallysimple/Really-Simple-Slideshow/raw/master/js/jquery.rs.slideshow.js"></script>
<script>
/**
* Bootstrap the javascript
*/
$(document).ready(function () {
$('.rs-slideshow').rsfSlideshow();
});
</script>
</body>
</html>
</code></pre>