如何在悬停时更改图标？

Question

我正在创建一个登录按钮，这个按钮最初有一个关闭的挂锁图标，我希望当指针位于其上时（悬停时）该图标更改为挂锁打开的图标。 这将是主要需求。

那么，如果你们中的任何人对如何使用悬停时动画打开的挂锁图标有任何想法，那就更好了。

我尝试过在线搜索，但找不到任何可以帮助我的东西：/ 我将在下面留下代码。

HTML：

<header class="header">
      <div class="header-box row">
        <div class="header-logo-box">
          <img
            src="/HeavenBoost.net/HeavenBoost.png"
            alt=""
            class="header-logo"
          />
        </div>
        <button type="button" class="nav-toggler">
          <span></span>
        </button>
        <nav class="nav">
          <ul class="head-ul">
            <div>
              <li class="head-li"><a href="" class="head-a">Home</a></li>
              <li class="head-li"><a href="" class="head-a">Shop</a></li>
              <li class="head-li"><a href="" class="head-a">Support</a></li>
              <li class="head-li"><a href="" class="head-a">Terms</a></li>
            </div>
            <div class="buttons-mobile desktop-hide">
              <a href="#" class="head-btn-a-mobile head-1st-btn-mobile"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth="{1.5}"
                  stroke="#fff"
                  className="w-6 h-6"
                  class="head-icon"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
                  />
                </svg>
                Login</a
              >
              <a href="#" class="head-btn-a-mobile head-1st-btn-mobile"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth="{1.5}"
                  stroke="#fff"
                  className="w-6 h-6"
                  class="head-icon"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
                  />
                </svg>
                Buy</a
              >
            </div>
          </ul>
        </nav>
        <div class="buttons mobile-hide">
          <a href="#" class="head-btn-a head-1st-btn"
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth="{1.5}"
              stroke="#fff"
              className="w-6 h-6"
              class="head-icon"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
              />
            </svg>
            Login</a
          >
          <a href="#" class="head-btn-a head-2nd-btn"
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth="{1.5}"
              stroke="#fff"
              className="w-6 h-6"
              class="head-icon"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
              />
            </svg>
            Buy</a
          >
        </div>
      </div>
    </header>

CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #212529;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1;
  font-weight: 400;
  background-color: #141414;
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #4186d7;
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  width: 10px;
  width: 10px;
}
*::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #141414;
}

*::-webkit-scrollbar-track:hover {
  background-color: #141414;
}

*::-webkit-scrollbar-track:active {
  background-color: #141414;
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #4186d7;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #4186d7;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #4186d7;
}
/**********************/
/*GENERAL COMPONENTS*/
/**********************/

.desktop-hide {
  display: none;
  visibility: hidden;
}

a,
li {
  list-style: none;
  text-decoration: none;
  display: inline-block;
}

button {
  display: inline-block;
}

/**********************/
/*HEADER SECTION*/
/**********************/

/*header*/
.header {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  max-height: 9.6rem;
  padding-top: 0;
  padding-bottom: 0;
  z-index: 999;
  padding: 2.4rem 2.4rem 0 2.4rem;
  z-index: 999;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 128rem;
  margin: 0 auto;
  padding: 2.4rem 4.8rem;
  border-radius: 2.4rem;
  border: 1px solid #4186d7;
  backdrop-filter: blur(10px);
  background-color: rgba(20, 20, 20, 0.8);
  z-index: 999;
}

.header-logo-box {
  max-width: 18rem;
}
.header-logo {
  width: 100%;
}

.head-ul {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

.head-a {
  padding: 0.8rem 1.6rem;
  border-radius: 0.6rem;
  transition: all 0.3s;
  font-size: 1.4rem;
}

.head-a:link {
  color: #fff;
}
.head-a:visited {
  color: #fff;
}
.head-a:hover {
  color: #fff;
  background-color: #4186d7;
}
.head-a:active {
  color: #fff;
  background-color: #3b79c2;
}
.buttons {
  font-size: 1.4rem;
  display: flex;
  gap: 0.8rem;
}

.head-icon {
  width: 2.4rem;
}

.head-btn-a {
  padding: 1.6rem 2.4rem;
  border-radius: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: all 0.3s;
}
.head-btn-a:link {
  font-size: 1.4rem;
  color: #fff;
}
.head-btn-a:visited {
  font-size: 1.4rem;
  color: #fff;
}
.head-btn-a:hover {
  font-size: 1.4rem;
  color: #fff;
}
.head-btn-a:active {
  font-size: 1.4rem;
  color: #fff;
}

.head-2nd-btn {
  background-color: #5492db;
}
.head-2nd-btn:hover {
  background-color: #3b79c2;
}
.mainb {
  padding-left: 5rem;
  padding-right: 5rem;
}
.nav-toggler {
  height: 34px;
  width: 44px;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  display: none;
}

.nav-toggler span {
  height: 2px;
  width: 20px;
  background-color: #fff;
  display: block;
  margin: auto;
  position: relative;
  transition: all 0.3s ease;
}
.nav-toggler.active span {
  background-color: transparent;
}
.nav-toggler span::before,
.nav-toggler span::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: all 0.3s ease;
}
.nav-toggler span::before {
  transform: translateY(-6px);
}
.nav-toggler.active span::before {
  transform: rotate(45deg);
}
.nav-toggler span::after {
  transform: translateY(6px);
}
.nav-toggler.active span::after {
  transform: rotate(135deg);
}
@media (max-width: 991px) {
  .mobile-hide {
    display: none;
  }
  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .align-items-center {
    align-items: center;
  }
  .justify-content-between {
    justify-content: space-between;
  }
  .nav-toggler {
    display: block;
  }
  .header .nav {
    width: 100%;
    padding: 0;
    max-height: 0px;
    overflow: hidden;
    visibility: hidden;
    transition: all 0.5s ease;
  }
  .header .nav.open {
    visibility: visible;
  }
  .header .nav ul {
    display: flex;
    flex-direction: column;
    padding: 1.8rem 0 0;
    margin-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .head-a {
    padding: 0.8rem 1.6rem;
    border-radius: 0.6rem;
    transition: all 0.3s;
    font-size: 1.4rem;
  }
  .header .nav ul li {
    display: block;
    margin: 0;
  }
}

当前使用的图标包： https://heroicons.com/

Answer 1

当您将鼠标悬停在链接上时，可以通过 css 更改 svg 的填充属性