0

誰かが私が持っているこの問題で私を助けることができますか?単一の文に要約するのは非常に困難です。

とにかく。

私はリストアイテムで構成されたアコーディオンを持っています。各リストアイテムには、アイテムを展開するためのアンカーリンクがあります。アンカーリンクは、リストアイテムの中央下にあり、次のリストアイテムに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/

この問題を解決する方法について誰かが提案を持っていますか?

よろしくお願いしますデイブ

4

1 に答える 1

0

背景画像要素自体の 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/

于 2012-10-20T16:08:26.927 に答える