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

Question

所以我从昨天开始就一直在使用Javascript(Vue)和html（所以请原谅我的困惑），我不知道如何在更改链接的同时更改“home”链接描述旁边的图像的颜色。

我试过使用CSS类，它工作，但只改变图像颜色时，你实际上悬停在图像上，而不是整个链接线。除了CSS之外，我也尝试过通过“onmouseover”将图像改变为彩色版本，但不知怎么的，这将图标立即改变为彩色版本（？）。我猜问题是我通过一个：hover来控制链接颜色，通过一个单独的类来控制图像颜色，所以图像颜色没有连接到链接上，但我不知道如何解决这个问题？

您可以在这里找到白色的文档图标，在这里找到红色的文档图标。

提前谢谢你！

下面是侧边栏“home”部分的一个片段：

<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

您可以将.documentdiv作为目标，这取决于使用CSS悬停A的情况：

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