我有一个UL和我试图使它的是,当你将鼠标悬停在某个项目,在左边绿色边框显示出来。我遇到的问题是,如果父母有孩子,当我翻身父,边框上显示出所有的孩子。我需要它在个人基础上的工作。我该怎么做呢?这里是我的代码和的jsfiddle。
http://jsfiddle.net/grem28/1rpsxqLp/
CSS
.widget_categories li {
position: relative; }
.widget_categories li.last {
margin-bottom: 10px; }
.widget_categories li a {
display: block;
padding: 12px 32px;
font-size: 14px;
line-height: 20px;
color: #7b6d5e;
position: relative;
border-left: 3px solid transparent; }
.widget_categories li:hover a, .widget_categories li.current-menu-item a {
border-left: 3px solid #40a268;
background: #f6f0ec; }
.widget_categories li > ul {
margin-left:10px;
}
HTML
<div class="widget_categories">
<ul><li class="first"><a href="/our-library-upstairs-gallery" hidefocus="true" style="outline: none;">Upstairs Gallery</a>
<ul><li class="first"><a href="/our-library-past-exhibits" hidefocus="true" style="outline: none;">Past Exhibits</a>
</li><li class="last"><a href="/upstairs-gallery-exhibition-form-request" hidefocus="true" style="outline: none;">Exhibition Form Request</a>
</li></ul>
</li><li><a href="/about/team" hidefocus="true" style="outline: none;">Board of Trustees</a>
<ul><li class="first last"><a href="/our-library-board-of-trustees-meeting-minutes" hidefocus="true" style="outline: none;">Meeting Minutes</a>
</li></ul>
</li><li><a href="/our-library-holiday-closings" hidefocus="true" style="outline: none;">Holiday Closings</a>
</li><li><a href="/our-library-history" hidefocus="true" style="outline: none;">History</a>
</li><li><a href="/our-library-employment-opportunities" hidefocus="true" style="outline: none;">Employment Opportunities</a>
</li><li><a href="/our-library-library-card-application" hidefocus="true" style="outline: none;">Library Card Application</a>
</li><li><a href="/our-library-policies-and-forms" hidefocus="true" style="outline: none;">Policies & Forms</a>
</li><li class="last"><a href="/our-library-intranet" hidefocus="true" style="outline: none;">Intranet</a>
<ul><li class="first"><a href="/our-library/intranet/bylaws-policy-manual" hidefocus="true" style="outline: none;">Bylaws/Policy Manual</a>
</li><li><a href="/our-library/intranet/employee-handbook" hidefocus="true" style="outline: none;">Employee Handbook</a>
</li><li><a href="/our-library/intranet/links" hidefocus="true" style="outline: none;">Links</a>
</li><li><a href="/our-library/intranet/whats-new" hidefocus="true" style="outline: none;">What's New</a>
</li><li><a href="/our-library/intranet/directory" hidefocus="true" style="outline: none;">Directory</a>
</li><li><a href="/our-library/intranet/meeting-minutes" hidefocus="true" style="outline: none;">Meeting Minutes</a>
</li><li class="last"><a href="/our-library/intranet/suffolk-web-login" hidefocus="true" style="outline: none;">Suffolk Web Login</a>
</li></ul>
</li></ul>
</div>
改变你的CSS所以它仅影响<a>
的是直接孩子:
.widget_categories li:hover > a{
border-left: 3px solid #40a268;
background: #f6f0ec;
}