CSS:hover同时修改自身类与其他类样式的问题

Alright, let's get this sorted out for you! The issue you're facing is super common—you want one element's hover state to affect both itself and another element, and the key here depends on how those two elements are arranged in your HTML structure. Let's break down the solutions based on different scenarios:

Solution 1: Elements are Siblings (Adjacent or General) #

If your .footer_status_tex and .footer_status_gear are direct siblings (one right after the other in the DOM), you can use CSS sibling combinators to target the gear element when the tex is hovered.

Example HTML: #

<div class="footer_status_tex">Hover over me!</div>
<div class="footer_status_gear">Gear element</div>

Corresponding CSS: #

/* Change the tex element's own font color on hover */
.footer_status_tex:hover {
  color: #2563eb; /* Replace with your desired text color */
}

/* Target the gear element that comes right after the hovered tex */
.footer_status_tex:hover + .footer_status_gear {
  background-color: #f3f4f6; /* Replace with your desired background color */
}

Note: If the gear element comes before the tex element, the adjacent combinator (+) won't work—jump to Solution 2 for a better approach in that case.

Solution 2: Elements Share a Common Parent (Best for Flexible Order) #

If both elements are inside a shared parent container, you can use the parent's hover state (or the modern :has() selector for precision) to target both elements regardless of their order.

Example HTML: #

<div class="footer_status_wrapper">
  <div class="footer_status_gear">Gear element</div>
  <div class="footer_status_tex">Hover over me!</div>
</div>

Option A: Parent Hover (Simple, Broad Support) #

This triggers when the mouse is anywhere in the parent container, which works well if the parent is tightly wrapped around the two elements:

.footer_status_wrapper:hover .footer_status_tex {
  color: #2563eb;
}

.footer_status_wrapper:hover .footer_status_gear {
  background-color: #f3f4f6;
}

Option B: :has() Selector (Precise, Modern Browsers) #

If you only want the effect to trigger when the tex element is specifically hovered (not just anywhere in the parent), use the :has() selector (supported in all modern browsers except IE):

/* Only apply styles when the tex element is being hovered */
.footer_status_wrapper:has(.footer_status_tex:hover) .footer_status_tex {
  color: #2563eb;
}

.footer_status_wrapper:has(.footer_status_tex:hover) .footer_status_gear {
  background-color: #f3f4f6;
}

Solution 3: Fallback with JavaScript (For Complex DOM Structures) #

If your elements are in completely separate parts of the DOM (no shared parent or sibling relationship), JavaScript will let you link their hover states regardless of structure.

Example Code: #

// Grab the target elements
const texElement = document.querySelector('.footer_status_tex');
const gearElement = document.querySelector('.footer_status_gear');

// Apply styles when hovering over the tex element
texElement.addEventListener('mouseenter', () => {
  texElement.style.color = '#2563eb';
  gearElement.style.backgroundColor = '#f3f4f6';
});

// Reset styles when the mouse leaves the tex element
texElement.addEventListener('mouseleave', () => {
  texElement.style.color = ''; // Resets to your default CSS
  gearElement.style.backgroundColor = ''; // Resets to your default CSS
});

Pick the solution that matches your actual HTML structure—most of the time, Solution 2 with :has() is the cleanest and most flexible choice for modern projects.

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