0

メニュー項目にカーソルを合わせると、ホバー背景がオンになり、ドロップダウン メニューが開きます。しかし、ドロップダウンにカーソルを合わせるたびに、背景が消えますか?

例とそれがどのように見えるべきか

ライブプレビューを見る

また、ご覧のとおり、ボックスの影がその上にあります。

コード: マイ メニュー html:

       <div class="secondheader">

      <div class="container">

               <div class="span12">

                          <ul class="nav6">

                          <li><a href="#">Home</a></li>

                           <li class="dropdown1"><a href="#">Categories</a>
                <ul>
                    <li class="substyle"><a href="#">Buy</a></li>
                    <li class="substyle"><a href="#">Sell</a></li>
                    <li class="substyle"><a href="#">Forums</a></li>
                    <li class="substyle"><a href="#">Contact</a></li>
                    <li class="substyle"><a href="#">item 1</a></li>
                    <li class="substyle"><a href="#">Forums</a></li>
                    <li class="substyle"><a href="#">Contact</a></li>
                    <li class="substyle"><a href="#">item 1</a></li>
                </ul>
            </li>

                          <li><a href="#">Buy</a></li>

                          <li><a href="#">Sell</a></li>

                          <li><a href="#">Forums</a></li>

                          <li><a href="#">Contact</a></li>

                          <li><a href="#">item 1</a></li>

                          <li><a href="#">Forums</a></li>

                          <li><a href="#">Contact</a></li>

                          <li><a href="#">item 1</a></li>

                          </ul>

                          </div>

               </div>

       </div>

</div>

メニューの私のcss：

.nav6  {
list-style: none;
font-family: 'Dosis', sans-serif;
float: left
font-size: 20px;
margin-top: 13px;
margin-left: -35px;
}
.nav6>li>ul{
display:none;
position:absolute;
background:white;
overflow:hidden;
width: 150px;
background: #fbf2d3;
margin-top: 20px;
margin-left: -3px;
-webkit-box-shadow:  0px 1px 5px 0px #dadada;
box-shadow:  0px 1px 5px 0px #dadada;       
}
.nav6>li:hover>ul {
display:block;
}
.nav6 >li {
display: inline;
margin: 0px;
font-size: 18px;
font-family: 'Dosis', sans-serif;
float: left;
margin-top: 10px;
}
.substyle {
padding: 10px;
}
.substyle:hover {
background: #f54922;
padding: 10px;
-webkit-border-radius: 6px;
border-radius: 6px;
color: #fff;
}
.subsyle a:hover {
color: #fff;
}
.nav6>li>a {
padding-top: 20px;

padding-bottom: 20px;

padding-left: 20px;

padding-right: 20px;

}
.nav6 a{color: #7D7253;}

.nav6 a:hover {
color: #fff;

text-decoration: none;
}
.nav6 > li > a:hover {
background-image: url("../img/hoverbg.png");    
}

質問: > セレクターは正確には何をしますか? 簡単な例でそれを説明してもらえますか? どうもありがとうございます！

4

3 に答える 3

1

子 li だけでなく、li 全体にカーソルを合わせたときにホバー画像を表示するクラスを追加する必要があります。最後のスタイルを次のように変更してみてください。

.nav6 > li > a:hover, .nav6 > li:hover > a {
    background-image: url("../img/hoverbg.png");    
}

また、 > セレクターは、具体的には親の「直接の子」と言っています。したがって、これがある場合：

<div>
    <p><span></span></p>
    <span></span>
</div>

次に、これはすべてのスパンに適用されます。

div span {}

これは 2 番目のスパンにのみ適用されます。

div > span {}

これらのいずれかが最初のスパンにのみ適用されます。

div p span {}
div > p > span {}

最後のケースでは、 > は使用しません。直接の子のみをターゲットにする必要がある場合にのみ使用してください。

于 2012-08-20T05:25:29.220 に答える
0

セレクターの全体的な知識についてはw3schoolsにアクセスしてください。本格的な学習に興味がある場合は、 saylorで無料の教育を受けることができます。

参考までに、 nav6 クラスの「内」のリスト>を意味します.nav6>li

于 2012-08-20T00:28:15.457 に答える
0

このクラスで変更を加えるだけです.nav6 > li > a:hover {}

そしてこのフォーマットに書きます.nav6 > li:hover a {}

そして、これはうまくいきます........

于 2012-08-20T06:14:11.737 に答える