Question

我第一次使用coda slider创建了一个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>

.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? */
}

Answer 1

   ul.navigation li a:active {  }

Answer 2

.selected:hover {
  /* you can use CSS3 to make arrows or image both */
}

在分析之后，我观察到，该插件将.selected类添加到所选的li元素中。因此，您还可以使用CSS3来使用:after和:before psuedo类与display:none一起制作箭头，并仅在.selected的鼠标悬停时显示。

Answer 3

ul.navigation > li:hover > a,
ul.navigation > li > a:active,
ul.navigation > li > a.selected {
    /* do whatever */
}

如果您有子菜单，我使用直接后代选择器（＆gt;）。

悬停菜单 - 活动菜单 - CSS

3 个答案: