谁能帮我解决我遇到的这个问题。很难用一句话来概括。
无论如何。
我有一个 Accordion ,由列表项组成。每个列表项都有一个用于展开该元素的 anchor 链接。 anchor 链接是绝对定位的,因此它位于列表项的底部中心,并溢出 10px 进入下一个列表项。当您将鼠标悬停在列表项上时,会应用背景色。
问题是这样的
当您滑过一个列表项时,背景色会出现在前一个列表项 anchor 链接的顶部。
我已经把 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/
有没有人对我如何解决这个问题有任何建议?
提前致谢 戴夫
最佳答案
也设置背景图像元素本身的 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;
}
关于html - 背景悬停颜色和溢出的导航元素 z-index 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12990192/