4

別のdivにカーソルを合わせたときにdivの高さを変更して、ハーモニカ効果を作ろうとしています。

私のHTMLは次のようになります。

<html><body>
  <div class="section1"></div>
  <div class="section2"></div>
  <div class="section3"></div>
  <div class="section4"></div>
</body></html>

各セクションの高さは 25% です。section1 にカーソルを合わせると、他のすべての div のサイズが縮小し、section1 が展開されます。これは、次の CSS を使用して簡単に実行できます。

.section1 {
  height: 40%;
}
.section1:hover ~ div:not(section1) {
  height: 20%;
}

問題は、~ セレクターが現在の div の下にある兄弟 div のみを選択することです。したがって、セクション 2 に同じコードを使用すると、セクション 3 とセクション 4 のみが影響を受けます。Section1 は、現在の div の上にあるため、元の高さが 25% になります。

CSSだけでこの問題を解決できますか?

4

3 に答える 3

4

はい。セクションの周りにラッパーを置き、ラッパーにカーソルを合わせると高さを減らします。次に、ホバリングしている 1 つのセクションの高さを上げます。

デモ

HTMLは次のようになります。

<div class='section-wrapper'>
    <div class="section1"></div>
    <div class="section2"></div>
    <div class="section3"></div>
    <div class="section4"></div>
</div>

関連するCSS :

.section-wrapper {
    height: 500px;
}
.section-wrapper div {
    height: 25%;
    outline: dotted 1px;
}
.section-wrapper:hover div {
    height: 20%;
}
.section-wrapper div:hover {
    height: 40%;
}
于 2012-09-04T11:33:49.157 に答える
0

これを試してください

HTML

<html>
    <body>
        <div class="container">
            <div class="section1">1</div>
            <div class="section2">2</div>
            <div class="section3">3</div>
            <div class="section4">4</div>
        </div>
    </body>
</html>

CSS </p> 

.container:hover div {
    height:20px;
}
.container .section1,.container .section1:hover,
.container .section2,.container .section2:hover,
.container .section3,.container .section3:hover,
.container .section4,.container .section4:hover{
  height: 50px;
}

​
于 2012-09-04T11:43:49.167 に答える
0

シンプルなセクションに親コンテナを追加する

<div class="parent">
  <div class="section1">section1</div>
  <div class="section2">section2</div>
  <div class="section3">section3</div>
  <div class="section4">section4</div>
</div

そして、それらを次のようにスタイルします

.parent div{height: 25%; border:solid 1px #f00}
.parent:hover div{height: 20%; }
.parent div:hover {height: 40%; }
于 2012-09-04T11:53:54.710 に答える