Изменить настройки тела CSS, наведя курсор на триггер

Question

У меня есть следующий код, и я попытался обернуть изображение в промежуток, который является идентификатором триггера.Я могу заставить его работать, если триггер является объектом 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 {
    z-index: 2;
    display: inline-block; 
}
#triggerModel:hover {
    background-image: url("http://i63.tinypic.com/vrc9op.jpg");
    background-repeat: no-repeat;
    background-position: fixed;
}

Answer 2

#triggerModel:hover ~ body недопустимо.

В настоящее время CSS не имеет возможности применять стили над элементом.Максимум, что вы можете сделать - это нацелиться на родного брата, который следует за элементом (что и делает ~. А + - это брат после него)