菜单右箭头悬停

揣我想使这将对它的右边箭头的菜单。在菜单悬停时，箭头将变为另一种箭头颜色，背景颜色将变为橙色。菜单右箭头悬停

当它不在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; 
}

来源

2013-08-06 Stakekidos

你可以添加一个小提琴？ –

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-06 21:01:51

你真棒谢谢你。它的作品像一个魅力... – Stakekidos

@Stakekidos不客气！ –

看起来像你：

background: #e17226 !important;

被重写

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

如果您将其更改为：

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

为李：hover和删除答：悬停背景选项，那么它应该工作，你希望的方式来

来源

2013-08-06 20:59:43 Ian

规则＃基于列表的菜单1： 风格的A标签，而不是LI。

来源

2013-08-06 20:59:44

从现在开始，谢谢你将永远记住... – Stakekidos

菜单右箭头悬停

回答

相关问题