在无序列表将鼠标悬停李项(悬停)引起家长和孩子变得突出

问题描述 投票:0回答:1

我有一个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 &amp; 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
1个回答
1
投票

改变你的CSS所以它仅影响<a>的是直接孩子:

.widget_categories li:hover > a{
  border-left: 3px solid #40a268;
  background: #f6f0ec;
}

http://jsfiddle.net/1rpsxqLp/2/

© www.soinside.com 2019 - 2024. All rights reserved.