在悬停/单击时更改图像（颜色）以及链接

Question

所以自昨天以来我一直在使用 Javascript (Vue) 和 html（所以请原谅我的菜鸟），我不知道如何更改图像的颜色与链接同时位于“主页”链接说明旁边。

我尝试过使用 CSS 类，它可以工作，但只会在您将鼠标悬停在图像上而不是整个链接行上时更改图像颜色。除了 CSS，我还尝试通过“onmouseover”将图像更改为彩色版本，但不知何故立即将图标更改为彩色版本（？）。我猜问题是我通过 a:hover 控制链接颜色，通过单独的类控制图像颜色，所以图像颜色没有连接到链接，但我不知道如何解决这个问题？

您可以找到白色here 和红色here 的文档图标。

非常感谢您！

---

下面只是侧边栏“主页”部分的 sn-p：

<template>
  <div>
    <div v-if="currentUser" class="vertical-nav bg-dark" id="sidebar">
      <div class="py-1 px-3 mb-4 bg-dark">
      </div>
      <ul class="nav flex-column bg-dark mb-0">
        <li class="nav-item ">
          <a href="#" class="nav-link text-white font-bold ">
            <div class="document"></div>
                    <i class="fa mr-3 text-primary fa-fw"></i>
                     Home
                </a>
        </li>
      </ul>
    </div>
  </div>
</template>

和 CSS：

/* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: rgb(202, 95, 95) !important;
}

/* selected link */
a:active {
  color: rgb(202, 95, 95) !important;

.document {
  width: 10px;
  height: 12px;
  background-size: cover;
  background: url("assets/documentWhiteSmall.png") no-repeat;
  display: inline-block;
}

.document:hover {
  width: 10px;
  height: 12px;
  background-size: cover;
  background: url("assets/otherDocRedSmall.png") no-repeat;
}

Answer 1

您可以根据 a 与 css 的悬停来定位您的 .document div：

a .document {
  width: 10px;
  height: 12px;
  background-size: cover;
  background: url("assets/documentWhiteSmall.png") no-repeat;
  display: inline-block;
}

a:hover .document {
  width: 10px;
  height: 12px;
  background-size: cover;
  background: url("assets/otherDocRedSmall.png") no-repeat;
}