Question

我正在尝试制作一个右侧有箭头的菜单。在悬停菜单时，箭头将变为另一种箭头颜色，背景颜色将变为橙色。

菜单工作正常，当它处于HOVER状态时，但当菜单上的HOVER时，箭头隐藏起来。我尝试过以下代码，但似乎无法找出问题所在。

HTML

  <div class="sidebar_pages">
    <ul>
        <li><a href="#">Who we are</a></li>
        <li><a href="#">What we do</a></li>
        <li><a href="#">Our Philosophy</a></li>
        <li><a href="#">Our Partners</a></li>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
  </div>

CSS

.sidebar_pages ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar_pages ul li{
    background: url(../images/a2_18.png) no-repeat;
    background-position: 270px 15px;
}

.sidebar_pages ul li:hover{
    background: url(../images/a1_09.png) no-repeat;
    background-position: 270px 15px;
}

.sidebar_pages ul li a{
    line-height: 42px !important;
    height: 42px !important;
    border-bottom: 1px solid #cccccc;
    padding-left: 16px;
    padding-right: 20px;
    font-size: 14px;
    color: #000;
    display: block;
    text-decoration: none;
}

.sidebar_pages ul li a:hover{
    background: #e17226 !important;
    color: #FFF !important;
    font-weight: bold !important;
}

Answer 1

看起来像你的：

background: #e17226 !important;

正在覆盖

background: url(../images/a1_09.png) no-repeat;

如果您将其更改为：

background: #e17266 url(../images/a1_09.png) no-repeat;

对于li：悬停并删除a：悬停背景选项然后它应该按您希望的方式工作

Answer 2

基于列表的菜单的规则＃1：设置A标记的样式，而不是LI 。

Answer 3

http://jsbin.com/ocefem/1/edit

.sidebar_pages ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar_pages ul li{
    background: url(../images/a2_18.png) no-repeat;
    background-position: 270px 15px;
}

.sidebar_pages ul li:hover{
    background: #e17226  url(../images/a1_09.png) no-repeat;   /*changed*/
    background-position: 270px 15px;
}

.sidebar_pages ul li a{
    line-height: 42px !important;
    height: 42px !important;
    border-bottom: 1px solid #cccccc;
    padding-left: 16px;
    padding-right: 20px;
    font-size: 14px;
    color: #000;
    display: block;
    text-decoration: none;
}

.sidebar_pages ul li a:hover{
    /*background: #e17226 !important;*/                       /* removed */
    color: #FFF !important;
    font-weight: bold !important;
}

菜单右箭头隐藏在悬停上

3 个答案: