css - 在无序列表 li 项上滚动(悬停)会使父项和子项突出显示

Question

我有一个 ul，我试图让它在您将鼠标悬停在某个元素上时，在左侧显示一个绿色边框。我遇到的问题是，如果 parent 有 child ，当我翻过 parent 时，边框会出现在所有 child 身上。我需要它在个人基础上工作。我该怎么做呢？这是我的代码和一个 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>

Answer 1

更改您的 CSS，使其仅影响 <a>的是直接 child :

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

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