html - 背景悬停颜色和溢出导航元素 z-index 问题

Question

谁能帮我解决我遇到的这个问题。很难用一句话概括。

无论如何。

我有一个手风琴，由列表项组成。每个列表项都有一个锚链接来展开该项。锚链接绝对定位，使其成为列表项的底部中心，并溢出 10px 进入下一个列表项。当您将鼠标悬停在列表项上时，将应用背景颜色。

问题是这样的。

当您滚动列表项时，背景颜色会显示在前一个列表项锚链接的顶部。

我已将 html/css 放在 jsfiddle 上

<ul class="entries">
<li>
  <article class="expand-parent">
      <a href="#" class="show-more ir expand-link"><span>Show more</span></a>
      <header>
          <time datetime="">Date</time>
          <hgroup>
              <h2>Heading</h2>
              <h6>Sub heading</h6>
          </hgroup>
      </header>
      <div class="item expand-target">
          <p>Content</p>
      </div>
  </article>
</li>
</ul>

http://jsfiddle.net/magicspon/GzB44/

有没有人有任何建议我可以解决这个问题？

提前感谢戴夫

Answer 1

也设置背景图像元素本身的 z-index。

ul.entries li:hover {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://labs.gumproductions.co.uk/jsfiddle/ui/news-bg.png");
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
z-index:1;
}

http://jsfiddle.net/GzB44/2/