悬停时更改 div 内的两个对象

Question

我有一个按钮，其中有一个 svg 图像（在 css 中定义）和一些文本。我试图在按钮的悬停和活动状态下更改文本和 svg 的颜色，但到目前为止我只能更改 svg 或文本。这是 html 中的代码：

<section class="header1 cid-uoclpABLMG" id="nosotros">
    <div class="mbr-section-btn mt-3 ctowa">
        <a class="btn btn-default" href="https://wa.me/5218448699192?text=some%20text" target="_blank">
            <span class="fa-brands--whatsapp-square"></span>
            <span>&nbsp;Contacto WhatsApp</span>
        </a>
    </div>
</section>

这是 svgs 的 CSS：

.fa-brands--whatsapp-square {
  display: inline-block;
  width: 2.63rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='green' d='M224 122.8c-72.7 0-131.8 59.1-131.9 131.8c0 24.9 7 49.2 20.2 70.1l3.1 5l-13.3 48.6l49.9-13.1l4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8c0-35.2-15.2-68.3-40.1-93.2c-25-25-58-38.7-93.2-38.7m77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8c-12.6 1.9-22.4.9-47.5-9.9c-39.7-17.2-65.7-57.2-67.7-59.8s-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5c2.6 0 5.3 0 7.6.1c2.4.1 5.7-.9 8.9 6.8c3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6c15.3 26.3 30.6 35.4 53.9 47.1c4 2 6.3 1.7 8.6-1c2.3-2.6 9.9-11.6 12.5-15.5c2.6-4 5.3-3.3 8.9-2s23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48M223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5c29.9 30 47.9 69.8 47.9 112.2c0 87.4-72.7 158.5-160.1 158.5'/%3E%3C/svg%3E");
}

.fa-brands--whatsapp-square:hover,
.fa-brands--whatsapp-square:active {
  display: inline-block;
  width: 2.63rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M224 122.8c-72.7 0-131.8 59.1-131.9 131.8c0 24.9 7 49.2 20.2 70.1l3.1 5l-13.3 48.6l49.9-13.1l4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8c0-35.2-15.2-68.3-40.1-93.2c-25-25-58-38.7-93.2-38.7m77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8c-12.6 1.9-22.4.9-47.5-9.9c-39.7-17.2-65.7-57.2-67.7-59.8s-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5c2.6 0 5.3 0 7.6.1c2.4.1 5.7-.9 8.9 6.8c3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6c15.3 26.3 30.6 35.4 53.9 47.1c4 2 6.3 1.7 8.6-1c2.3-2.6 9.9-11.6 12.5-15.5c2.6-4 5.3-3.3 8.9-2s23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48M223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5c29.9 30 47.9 69.8 47.9 112.2c0 87.4-72.7 158.5-160.1 158.5'/%3E%3C/svg%3E");
}

还有按钮的 CSS：

#nosotros .btn, .filter-button {
    font-size: 18px;
    border: 1px solid #FF0000;
    border-radius: 5px;
    text-align: center;
    color: #FF0000;
    margin-bottom: 30px;
}
#nosotros .btn:hover, .filter-button:hover {
    font-size: 18px;
    border: 1px solid #FFF;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #FF0000;
}
#nosotros .btn:active, .btn-default:active .filter-button:active {
    background-color: #FFA500;
    color: white;
}

提前致谢，

Answer 1

使用现代 Web 组件可能更容易，使用 声明性 ShadowDOM 不需要 JS

CSS微调就交给你了

<whatsapp-button>
  <template shadowrootmode="open">
    <style>
      :host {
        display: inline-block;
        font-size: 18px;
        border: 1px solid red;
        border-radius: 5px;
        text-align: center;
        color: red;
        margin-bottom: 30px;
        width: 160px;
      }
      a {
        display: inline-block;
      }
      a:hover {
        inset: 1px solid white;
        color: white;
        background: red;
      }
      a:active {
        background-color: #ffa500;
        color: white;
      }
    </style>
    <a href="https://wa.me/5218448699192?text=some%20text" target="_blank">
      <svg viewBox="0 0 450 450">
        <path
          fill="green"
          d="m226 92c-73 0-132 59-132 132 0 25 7 49 20 70l3 5-13 49 50-13 5 3c20 12 43 18 67 18h0c73 0 133-59 133-132 0-35-15-68-40-93-25-25-58-39-93-39m78 188c-3 9-19 18-27 19-13 2-22 1-48-10-40-17-66-57-68-60s-16-22-16-41 10-29 14-33c4-4 8-5 11-5 3 0 5 0 8 0 2 0 6-1 9 7 3 8 11 27 12 29s2 4 0 7c-8 15-16 15-12 22 15 26 31 35 54 47 4 2 6 2 9-1 2-3 10-12 13-16 3-4 5-3 9-2s23 11 27 13 7 3 8 5c1 2 1 10-2 19m97-279h-352c-26 0-48 22-48 48v352c0 27 22 48 48 48h352c27 0 48-22 48-48v-352c0-27-22-48-48-48m-176 381c-27 0-53-7-76-19l-84 22 23-82c-14-24-21-51-21-79-1-88 71-159 158-159 42 0 82 17 112 47 30 30 48 70 48 112 0 87-73 159-160 159"
        />
      </svg>
      <div>Contacto WhatsApp</div>
    </a>
  </template>
</whatsapp-button>