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。の中findにclassという名前の要素がないため、li.navの中には要素を返しません。以下は変更されたコードです。panelli.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 に答える