0

JSFiddle: http://jsfiddle.net/qguq4/19/

作業中の HTML:

<div id="menu">hover me</div>
<div id="firstLayer"></div>

動作しない HTML:

<div id="firstLayer"></div>
<div id="menu">hover me</div>

CSS:

#firstLayer {
  background-image:linear-gradient(90deg,red,red);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  width: 100%; 
  height: 100px; 
  min-width:900px; 
  position:absolute; 
  left:0; 
  top:0;
}

#menu {
 position:absolute; 
 top: 110px; 
 left: 50%;
}

#menu:hover ~ #firstLayer {
 clip: rect(10px,800px,80px,400px);
}

#firstLayerホバー効果が後に来る場合にのみ機能するのはなぜ#menuですか?

4

1 に答える 1

4

それは一般的な兄弟コンビネータです。2 番目の要素の前に最初の要素が必要です。

http://www.w3.org/TR/selectors/#general-sibling-combinators

于 2013-07-22T18:55:21.977 に答える