如何使用CSS和HTML实现点击跳转页面后切换图片

Got it, let's fix this image switching issue you're having with ActiveLink. The main problem right now is that your .bg class uses the content property to try swapping the image, which doesn't work for <img> elements—content is meant for pseudo-elements like ::before/::after. Plus, you had a typo in your CSS: widows should be width (that's a common slip-up, no worries!).

Here are two reliable solutions to get the image switching working when the link is active:

Solution 1: Use CSS Background Images (Recommended) #

This approach replaces the <img> tag with a div that uses background images, making it easy to swap the image via the active class.

Updated JSX: #

<ActiveLink activeClassName="bg" href="/about">
  <li className="nav-item box-icon">
    <a className="nav-link">
      <div className="icon-container"></div>
    </a>
    <span>Graduate </span>
  </li>
</ActiveLink>

Corrected CSS: #

.box-icon {
  width: 200px;
  height: 150px;
  background-color: aqua;
  text-align: center;
  padding-top: 10px;
  font-family: "Poppins";
  font-size: 20px;
}

.icon-container {
  width: 53px; /* Fixed typo: replaced widows with width */
  height: 60px;
  margin-top: 25px;
  background-image: url("/assets/img/green.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Styles for active state */
.bg {
  background-color: #0fa49e;
  color: #fff;
  font-family: "Poppins";
  font-size: 20px;
}

.bg .icon-container {
  background-image: url("/assets/img/white/white.png"); /* Swap to white image */
}

Solution 2: Toggle Visibility of Two Images #

If you need to keep using <img> tags, you can add both the green and white images, then toggle their visibility based on the active class.

Updated JSX: #

<ActiveLink activeClassName="bg" href="/about">
  <li className="nav-item box-icon">
    <a className="nav-link">
      <img src="/assets/img/green.png" className="icon-size green-icon" />
      <img src="/assets/img/white/white.png" className="icon-size white-icon" />
    </a>
    <span>Graduate </span>
  </li>
</ActiveLink>

Corrected CSS: #

.box-icon {
  width: 200px;
  height: 150px;
  background-color: aqua;
  text-align: center;
  padding-top: 10px;
  font-family: "Poppins";
  font-size: 20px;
}

.icon-size {
  width: 53px; /* Fixed typo: replaced widows with width */
  height: 60px;
  margin-top: 25px;
}

.white-icon {
  display: none; /* Hide white image by default */
}

/* Styles for active state */
.bg {
  background-color: #0fa49e;
  color: #fff;
  font-family: "Poppins";
  font-size: 20px;
}

.bg .green-icon {
  display: none; /* Hide green image when active */
}

.bg .white-icon {
  display: block; /* Show white image when active */
}

Both solutions will:

• Trigger the active state when the user navigates to /about (thanks to ActiveLink's activeClassName)
• Swap the green image to white while applying your desired background and text color styles

内容的提问来源于stack exchange，提问作者Ravios Savior