Question

我有以下代码，我试图将图像包装在作为触发器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>

Answer 1

#triggerModel:hover ~ body无效。

CSS目前无法在元素上方应用样式。你能做的最多就是针对一个兄弟，跟随一个元素（这是~所做的。而+是一个直接的兄弟姐妹）

Answer 2

这应该有效：

#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;
}

通过将鼠标悬停在触发器上来更改CSS正文设置

2 个答案: