Question

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

我希望如此，当有人将鼠标悬停在按钮上时，图像将显示在其下方。它正确隐藏图像，但淡入淡出不起作用。我不知道它为什么不起作用。

Answer 1

.focus绑定到"focus"事件（我链接到它的内容而不是事件标准）。当您选中或单击文本输入时，这是最常见的，但它也可以应用于其他元素。

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

Answer 2

尝试将您的脚本放在文档的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>

Answer 3

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

fadeOut不工作

3 个答案: