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

Question

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

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

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

非常感谢您！

---

下面只是侧边栏“主页”部分的片段：

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

标签： htmlcss

Answer 1

您可以.document根据acss 的悬停来定位您的 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;
}