1

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

菜单在其不在悬停状态时工作正常，但当悬停在菜单上时，箭头隐藏起来。我已尝试使用以下代码，但似乎无法找出做错了什么。

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;
}
4

3 回答 3

0

看起来像你的：

background: #e17226 !important;

覆盖

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

如果您将其更改为：

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

对于 li:hover 并删除 a:hover 背景选项，那么它应该按照您希望的方式工作

于 2013-08-06T20:59:43.053 回答
0

基于列表的菜单的规则 #1：设置 A-tag 的样式，而不是 LI。

于 2013-08-06T20:59:44.460 回答
0

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;
}
于 2013-08-06T21:01:51.870 回答