如何在:hover状态下修改按钮文本及"Contacte-nos"文本颜色

Great questions! Let's break these down one by one with practical, easy-to-implement solutions:

1. Changing Button Text on :hover #

CSS doesn’t let you directly modify an element’s raw text content, but we have two reliable workarounds to achieve this effect:

Method 1: Use Pseudo-Elements (Simple Text Swaps) #

Perfect for basic text replacements without extra HTML markup:

<button class="swap-btn">Click Me</button>

.swap-btn {
  position: relative;
  /* Hide the original button text */
  color: transparent;
  padding: 8px 16px;
  border: none;
  background: #3498db;
  cursor: pointer;
}

/* Render default text via ::before pseudo-element */
.swap-btn::before {
  content: "Click Me";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* Swap text when hovering */
.swap-btn:hover::before {
  content: "I'm Hovered!";
}

Method 2: Dual Text Containers (Flexible for Complex Content) #

Ideal if you need to style the hover text differently or handle more complex content:

<button class="swap-btn">
  <span class="default-text">Click Me</span>
  <span class="hover-text">I'm Hovered!</span>
</button>

.swap-btn {
  padding: 8px 16px;
  border: none;
  background: #3498db;
  cursor: pointer;
}

/* Hide hover text by default */
.swap-btn .hover-text {
  display: none;
  color: #f1c40f;
}

/* Toggle visibility on hover */
.swap-btn:hover .default-text {
  display: none;
}

.swap-btn:hover .hover-text {
  display: inline;
}

2. Changing "Contacte-nos" Color on :hover #

This is straightforward—target the element holding the text and apply the color property within the :hover state. Here are common use cases:

Scenario 1: Text as a Standalone Link/Element #

<span class="contact-link">Contacte-nos</span>

.contact-link {
  color: #333;
  text-decoration: none;
}

.contact-link:hover {
  color: #e74c3c; /* Bright red example */
  text-decoration: underline; /* Optional: Add underline on hover */
}

Scenario 2: Text Inside a Button #

<button class="contact-btn">Contacte-nos</button>

.contact-btn {
  background: #2ecc71;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.contact-btn:hover {
  color: #ecf0f1; /* Lighter white for better contrast */
  background: #27ae60; /* Darken button background (optional) */
}

Scenario 3: Text as a Nested Child Element #

If "Contacte-nos" lives inside another container, target the child directly:

<div class="contact-box">
  <span class="contact-text">Contacte-nos</span>
</div>

.contact-text:hover {
  color: #9b59b6; /* Purple example */
}

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