0

ここで検索した後、いくつかの救済策を試しましたが、うまくいかないようです。

2 つの個別の div: 個別の列に 4 つの画像リンクを含む 1 つの div (それぞれに CSS フェード ロールオーバー効果があります)、および全幅の列に単純なテキスト行を含む 1 つの div。テキスト div を非表示にして、三角形の画像のロールオーバー時に表示しようとしています。

以下に示す画像と最初のテキストの宣伝文へのリンクを次に示します: http://goodsouldesign.com/redmont

<div id="triangles>
  <a>image1</a>
  <a>image2</a>
  <a>image3</a>
  <a>image4</a>
</div>

<div id="blurb1>Text here</div>
<div id="blurb2>Text here</div>
<div id="blurb3>Text here</div>
<div id="blurb4>Text here</div>

どんなアイデアでも大歓迎です！

4

2 に答える 2

0

あなたがどのようにレイアウトしたかが正確にわかったので、新しい回答を書いています。宣伝文句を全幅にする必要があるかもしれませんが、それらは要素に非常に近いため、兄弟にすることができます。たとえば、次のようにします。

<div id="wrapper">
  <a id="tri1"></a>
  <a id="tri2"></a>
  <a id="tri3"></a>
  <a id="tri4"></a>
  <div id="blurbs">
      <div id="blurb1">Text here 1</div>
      <div id="blurb2">Text here 2</div>
      <div id="blurb3">Text here 3</div>
      <div id="blurb4">Text here 4</div>    
  </div>
</div>

宣伝文句は、三角形の兄弟である宣伝文句コンテナの子になりました。これにより、css 兄弟セレクター~を使用してそれらにアクセスできるようになります。

別の方法として、宣伝文句のコンテナさえ必要ありません。スタイリングが少し簡単になるかもしれませんが、宣伝文句をブロック要素にするだけでこのレイアウトを実現できますが、三角形はdisplay: inline-block;. これにより、すべての三角形が同じ線上に配置され、その下に宣伝文句がぶつけられます。幅を 100% にすると、希望どおりになります。

コンテナなしでこれを行う方法を示すフィドルと、兄弟セレクターを次に示します。

#wrapper #tri1:hover ~ #blurb1 { display: block; }

http://jsfiddle.net/cJJtc/1/

それが役立つことを願っています!

于 2013-10-03T23:53:33.030 に答える