Question

好吧我们一直试图让每个文本框的背景向后滑动，在悬停时用＃0F3的颜色填充整个框。每个分隔线之间的含义却没有运气。你能帮忙吗？

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>

Answer 1

这里有几件事要纠正：

你的JS代码是

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

此处hover事件绑定到元素li.nav。 li.nav中的find不返回任何元素，因为panel内没有名为class 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;
}

以下是fiddle

JQuery SlideToggle背景悬停

1 个答案: