bugfix> css > 投稿

次のコードがあり、トリガーIDであるスパンでイメージをラップしようとしました。トリガーが明示的な高さと幅を持つdivオブジェクトである場合、動作させることができます。オブジェクトをトリガーする画像を作成する方法はありますか?

body {
  background: black;
  color: white;
}
#triggerModel {
  z-index: 2;
}
#triggerModel:hover ~ body {
  background-image: url('http://placehold.it/1600x900');
  background-repeat: no-repeat;
  background-position: fixed;
}
#wrapper {
  width: 480px;
  margin: auto;
  margin-top: 60vh;
}
.line1 {
  letter-spacing: 42px;
  font-size: 35px;
}
.line2 {
  letter-spacing: 43.7px;
  font-size: 35px;
}
p.clear {
  clear: both;
}

<div id="wrapper">
  <span id="triggerModel"><img src="http://placehold.it/100x100" alt="" style="float: left; margin-right: 20%"></span>
  <img src="artist.jpg" alt="" style="float: left">
  <img src="web.jpg" alt="" style="float: right">
  <p class="clear"></p>
  <span class="line1">TWO&#9642;FOUR</span>
  <span class="line2">GRAPHICS</span>
</div>

回答 2 件
  • #triggerModel:hover ~ body  有効ではない。

    CSSには現在、要素の上にスタイルを適用する機能がありません。できることは、兄弟をターゲットにすることです従う 要素(これは ~  します。そして、 +  直後の兄弟です)

  • これは動作するはずです:

    #triggerModel {
        z-index: 2;
        display: inline-block; 
    }
    #triggerModel:hover {
        background-image: url("http://i63.tinypic.com/vrc9op.jpg");
        background-repeat: no-repeat;
        background-position: fixed;
    }
    
    

あなたの答え