2

次のhtmlブロックが与えられた

<div><span></span><span></span><span></span>
    <div><span></span><span></span><span></span></div>
</div>​

そしてこのcssはそれのために

span {
    display: inline-block;
    width: 70px;
    height: 50px;
}
div > div > span { visibility: hidden; }
span:not(:first-child) { margin-left: 5px; }
span:first-child {background-color: red;}
span:nth-child(2) {background-color: green;}
span:nth-child(3) {background-color: blue;}

span:nth-child(1):hover ~ div span:nth-child(1),
span:nth-child(2):hover ~ div span:nth-child(2),
span:nth-child(3):hover ~ div span:nth-child(3)
{ visibility: visible; }
​

スマートcssを使用して最後のルールを書き直し、divがいくつあっても、現在外側のdivでホバリングしているNの内側のdivからn番目の子が常に表示されるようにすることはできますか？

このフィドルのデモhttp://jsfiddle.net/E34ay/3/

言い換えれば、私は次のようなものが欲しいです：

span:nth-child(N):hover ~ div span:nth-child(N) { visibility: visible; }

ただし、これは、すべての子ではなく、すでに一致したNのみに一致します（最初のN = 2番目のN）

これは、このhttp://jsfiddle.net/2zFsf/のように機能するギャラリー用です。

4

1 に答える 1

4

CSSだけではやりたいことが十分にできないこのような場合、SASS（またはSCSS）は本当に役に立ちます。

@for制御ディレクティブを使用すると、1つの数値を変更してスケールアップするのと同じくらい簡単です。

@for $i from 1 through 3 {
  span:nth-child(#{$i}):hover ~ div span:nth-child(#{$i}) { 
      visibility: visible; 
  }
}

正確なCSSにコンパイルされます。3を、計画しているスパン数に変更します。

デモ

于 2012-10-11T23:20:39.783 に答える