0

好吧，伙计们，我一直在尝试让每个文本框的背景滑到后面，以便在悬停时用 #0F3 的颜色填充整个框。每个人的分隔线之间的意义，但没有运气。你能帮我吗？

http://jsfiddle.net/jfarr07/hWPAV/3/

HTML

<div id="navigation">
<div class="panel"></div>
    <ul id="nav">
        <li class="nav"><a href="#">HOME</a></li>
        <li class="nav"><a href="#">OUR STORY</a></li>
        <li class="nav"><a href="#">GALLERY</a></li>
        <li class="nav"><a href="#">GIFT REGISTRY</a></li>
    </ul>
</div>

CSS

body, html {
padding:0;
margin:0;
background-repeat:none;
background-image:url(../../Portfolio/images/lyricblast.png);

}
a:link {
text-decoration:none;
color:#000;
font-family:open-sans, HelveticaNeue, Helvetica Neue Condensed Bold, Helvetica Neue, serif;
}
a:visited {
color:#000;
}
a:hover {
color:#FFF;
}
#navigation {
width:auto;
height:30px;
background:rgba(0, 0, 0, .35);
padding-top:10px;
}
ul#nav {
display:inline;
}
li.nav {
display:inline-block;
margin: 0px 0px 0px 30px;
padding:0px 0px 0px 30px;
position:relative;
}
li~li { 
border-left: 1px solid #000000;

}
.panel {
background:#0F3;
background-size:100%;
height:40px;
display:none;

}

jQuery

<script>
$(document).ready(function() {
$("li.nav").hover(
function() {
    $(this).find(".panel").slideToggle("fast");
},
function() {
    $(this).find(".panel").slideToggle("fast");
}
);
});

</script>
4

1 回答 1

0

这里有几件事需要纠正：

你的 JS 代码是

<script>
    $(document).ready(function() {
        $("li.nav").hover(function() {
            $(this).find(".panel").slideToggle("fast");
        },function() {
            $(this).find(".panel").slideToggle("fast");
        });
    });
</script>

这里hover事件被绑定到元素li.nav。findinside li.nav 不返回任何元素，因为里面没有名为 class 的panel元素li.nav。下面是修改后的代码：

<script>
    $(document).ready(function() {
        $("li.nav").hover(function() {
            $("#navigation").find(".panel").stop().slideToggle("fast");
        }, function() {
            $("#navigation").find(".panel").stop().slideToggle("fast");
        });
    });
</script>

我还修改了样式.panel并使其成为绝对。

.panel {
    position:absolute;
    background:#0F3;
    background-size:100%;
    height:40px;
    display:none;
    width:100%;
    top:0;
}

这是小提琴

于 2013-03-04T03:51:53.197 回答