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类添加到li被选中的元素中。因此，您还可以使用 CSS3 通过使用:after和:before伪类来制作箭头，display: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 回答