时间戳

首页 > 解决方案 > 悬停不同元素上的 CSS 更改背景 img

css - 悬停不同元素上的 CSS 更改背景 img

问题描述

我有 4 个不同的图标，根据我悬停的图标，我想更改 div 中的背景图像。html是这样的

  <div class="col side">
    <i id="icon1"></i>
    <i id="icon2"></i>
    <i id="icon3"></i>
    <i id="icon4"></i>
  </div>
  <div class="col">
    <img src="img1" id="img1" class="content" alt="" />
    <img src="img2" id="img2" class="content" alt="" />
    <img src="img3" id="img3" class="content" alt="" />
    <img src="img4" id="img4" class="content" alt="" />
  </div>

所以当我悬停 icon1 时，我想显示 img1 等等。我知道如何用 jquery/javascript 做到这一点，但纯 css 可以吗？

标签： css

解决方案

这是不可能的，但尝试在悬停时为每个图标添加背景图像

#icon1:hover
 {
  background: url("path to img1");
 }

同样明智地将其添加到所有图标中，但我认为它会导致悬停时对齐错误

推荐阅读