我在extratorrent网站上遇到了mouseover事件,如下图所示.
alt text http://img3.imageshack.us/img3/4516/usercommment999.jpg
当您将鼠标悬停在用户名链接上时,它会显示一个隐藏的div.非常整洁和光滑.
我是jQuery的新手.任何人都可以告诉我如何开始在正确的轨道上做到这一点？谢谢.
更新1:
I wrote something like the following attempting to get the result. The problem is that when I mouse the mouse out the link the Div wont stay, it disappear immediately.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#show_div").mouseout(function() { $("#hello").css('visibility','hidden'); });
});
</script>
</head>
<body>
<a id="show_div" href="#">Link text</a>
<div id="hello" …我的鼠标悬停和鼠标输出功能有问题.当我鼠标悬停链接时,它显示一个隐藏的<div>,当我鼠标输出div时,它隐藏了div.问题是,如果我将鼠标悬停在链接上,那么我将鼠标移动到不在div上方的其他地方,div将不会消失.
如果我使用链接的mouseout事件来设置div的可见性,那么我将无法将鼠标悬停在div上.
这是我的HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Untitled Document
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#show_div").mouseover(function() {
$("#hello").css('visibility', 'visible');
});
$("#hello").mouseover(function() {
$("#hello").css('visibility', 'visible');
});
$("#hello").mouseout(function() {
$("#hello").css('visibility', 'hidden');
});
});
</script>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<a id="show_div" href="#">Link text</a>
<div id="hello" style="visibility:hidden;">
<ul>
<li>
Coffee
</li>
<li>
Tea
</li>
<li>
Milk
</li>
</ul>
</div>
<br/>
<br/>
</body>
</html>
我设计了一个网站,整个网站都包含在一个页面内(index.php).在页面内,<section>标签定义了网站的不同部分(家庭,联系人,博客等)
通过始终可见的按钮实现导航,单击时使用javascript更改部分的可见性,以便任何时候只显示一个.
更具体地说,这是通过使用url中的哈希并处理hashchange事件来完成的.这会产生诸如www.site.com/#home(默认情况下,如果没有其他哈希)和www.site.com/#contact等网址.
我想知道这是不是一个好的设计.它有效,但我觉得必须有一个更好的方法来实现同样的事情？为了澄清,我的目标是一次加载所有主要内容的网站,以便在初始加载后没有更多的页面加载,并且在各个部分之间移动会更加平滑.
除此之外,还引入了另一个关于SEO的问题.该网站在谷歌显示出来,但是如果举例来说,搜索查询中包含的特定部分的术语,它仍然加载默认#home页面点击后,没有特定的部分术语被发现.怎样纠正呢？
最后,其中一个部分是博客部分,它是唯一一次不加载所有部分的部分,因为默认情况下它会从数据库加载最新的帖子.当用户从列表中选择不同的帖子(其本身是使用AJAX加载)时,AJAX用于获取和显示新帖子,pushState更改历史记录.同样,为了给每个帖子提供一个可以在外部引用的唯一URL,菜单会更改由javascript处理的URL,从而产生诸如www.site.com/?blogPost=2#blog和之类的URL www.site.com/?blogPost=1#blog.
谷歌根本看不到这些帖子.使用Googlebot工具显示抓取工具将博客部分视为始终为空,因此没有任何博客帖子被编入索引.
我能改变什么？
(我不知道这是不是应该在网站管理员堆栈交换上,如果它在错误的地方就很抱歉)