0

我是网页设计的新手。我现在正在制作我的简历。我有这样的导航 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>

我想要它，所以当有人将鼠标悬停在按钮上时，图像将出现在其下方。它正确隐藏了图像，但淡入淡出不起作用。我不知道为什么它不起作用。

4

3 回答 3

0

我相信您使用的是 960gs，我注意到的一件事是：您的四个 grid_3 div 嵌套在您的 grid_12 中。960gs 包括两个名为.alpha和的类，.omega用于在网格位于父网格内时修复嵌套边距。您需要将.alpha类放在第一个子 div 上 - 在这种情况下是您的，最后一个子 div 上<div id="#home">的类是您的. 这将修复您在内部嵌套的四个 grid_3 上的边距。.omega<div id="Contact">

于 2013-02-22T03:07:06.677 回答
0

.focus绑定到“焦点”事件（我链接到它是什么的描述而不是事件标准）。这在您选择或单击文本输入时最常见，但它也可以应用于其他元素。

( mouseenteralso mouseover, 但前者在子元素也悬停时不会重复触发) 事件在鼠标进入元素时发生。相反的是mouseleave（mouseout）。 http://api.jquery.com/mouseenter/

于 2013-02-22T02:42:57.470 回答
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>
于 2013-02-22T02:43:57.387 回答