我是网页设计的新手。我现在正在制作简历。我有这样的导航div:
<div id="nav" class="grid_12">
<div id="Home" class="grid_3">
<div class="button">
<a href="#">Home</a>
</div>
</div>
<div id="Life" class="grid_3">
<div class="button">
<a href="#">Life</a>
</div>
<img src="img/someimg.jpg">
</div>
<div id="Portfolio" class="grid_3">
<div class="button">
<a href="#">Portfolio</a>
</div>
</div>
<div id="Contact" class="grid_3">
<div class="button">
<a href="#">Home</a>
</div>
</div>
</div>
然后我有一个导航脚本:
<script type="text/javascript>
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
</script>
我希望如此,当有人将鼠标悬停在按钮上时,图像将显示在其下方。它正确隐藏图像,但淡入淡出不起作用。我不知道它为什么不起作用。
答案 0 :(得分:0)
.focus
绑定到"focus"事件(我链接到它的内容而不是事件标准)。当您选中或单击文本输入时,这是最常见的,但它也可以应用于其他元素。
mouseenter
(也是mouseover
,但当子元素也悬停时,前者不会重复触发)当鼠标进入元素时会发生事件。相反的是mouseleave
(mouseout
)。 http://api.jquery.com/mouseenter/
答案 1 :(得分:0)
尝试将您的脚本放在文档的ready
事件中:
<script type="text/javascript>
$(document).ready(function(){
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
});
</script>
答案 2 :(得分:0)
我相信你正在使用960gs,我注意到的一件事是:你的四个grid_3 div嵌套在你的grid_12中。 960gs包含两个名为.alpha
和.omega
的类,用于在网格位于父网格内时修复嵌套边距。您需要将.alpha
课程放在第一个子div上 - 在这种情况下,您的<div id="#home">
和.omega
课程位于最后一个子div上,即<div id="Contact">
。这将修复您在内部嵌套的四个grid_3上的边距。