通过悬停触发元素修改CSS body样式的实现方案咨询

当然可以直接把图片作为触发元素！你之前用带宽高的div能生效，是因为块级元素默认有明确的交互区域；而<img>作为替换元素，本身就自带可交互的范围（就是它的图像区域），完全可以直接作为:hover的触发目标，不需要额外用<span>包裹。

修改后的代码示例 #

CSS 部分

body { background: black; color: white; }
/* 直接把触发目标改成img元素的id，同时修正背景固定的属性错误 */
#triggerModel:hover ~ #wrapper ~ body {
  background-image: url('http://placehold.it/1600x900');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; /* 可选优化：让背景图适配屏幕 */
}
#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; }

HTML 部分

<!-- 直接给目标img加上id作为触发元素，去掉多余的外层span -->
<img id="triggerModel" src="http://placehold.it/100x100" alt="" style="float: left; margin-right: 20%">
<div id="wrapper">
  <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>

关键细节说明 #

• 修正了原CSS里的小错误：background-position: fixed是无效写法，实现背景固定应该用background-attachment: fixed。
• 调整了选择器层级：因为触发元素现在是#wrapper的同级元素，所以用#triggerModel:hover ~ #wrapper ~ body来确保层级关联正确，触发背景变化。
• <img>本身完全支持:hover伪类，只要它在页面上有可见区域，就能像块级div一样正常触发交互逻辑，不需要额外的包裹元素。

内容的提问来源于stack exchange，提问作者Tony White