1

初めて、coda スライダーを使用して jquery スライダーを作成しました。

しかし、メニューをカスタマイズしたいのですが、カーソルを合わせたときにli aの上に表示される小さな矢印が必要です。

どうすればいいですか？画像を使うべきですか？または、css3 を使用して効果を達成できますか?

<ul class="navigation">
<li><a href="#sites">Sites</a></li>
<li><a href="#files">Files</a></li>
<li><a href="#editor">Editor</a></li>

<style>
.navigation {
padding:0px;
margin-bottom:90px;
}

ul.navigation li {
list-style-type:none;
}

ul.navigation li a {
text-decoration:none;
float:left;
width:254px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:40px;
}

ul.navigation li a:hover {
background-color:#666;
  /*there should be some sort of background image here or css3? */
}

.active {
   /*there should be some sort of background image here or css3? */
}
<style>
4

3 に答える 3

1 
   ul.navigation li a:active {  }
于 2013-02-15T10:14:03.300 に答える
0 
.selected:hover {
  /* you can use CSS3 to make arrows or image both */
}

分析した後、プラグインが選択された要素に.selectedクラスを追加することを観察しました。したがって、 CSS3liを使用して矢印を作成することも:afterできます。:beforedisplay:none.selected

于 2013-02-15T10:10:29.863 に答える
0 
ul.navigation > li:hover > a,
ul.navigation > li > a:active,
ul.navigation > li > a.selected {
    /* do whatever */
}

サブメニューがある場合に備えて、直接の子孫セレクター (>) を使用しました。

于 2013-02-15T10:22:39.763 に答える