XML+CSS项目：悬停John_Smith对象时触发指定player元素的hover效果

Hey there! Let's tackle this problem head-on. The short answer is: pure CSS can't pull this off alone, but we can pair CSS with a tiny bit of JavaScript to get exactly the behavior you want. Here's how to make it work:

Why Pure CSS Falls Short #

CSS's :hover pseudo-class only lets you style the hovered element itself, or elements directly related to it (like children, adjacent siblings, or descendants). There's no native CSS selector that can target all elements across the entire document sharing the same menID attribute value when one is hovered. That's where JavaScript comes in to bridge the gap.

Step 1: Define Your CSS Styles #

First, create a reusable class for the hover state (instead of relying on the :hover pseudo-class). This gives us full control over applying the style to multiple elements:

/* Default style for player elements */
player {
  display: block;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

/* Hover state style (we'll toggle this via JS) */
player.highlighted {
  border-color: #2196F3;
  background-color: #E3F2FD;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Step 2: Add JavaScript to Sync Hover States #

Next, write a small script that listens for mouseover/mouseout events on each player element. When one is hovered, it finds all player elements with the same menID and applies the highlighted class. When the mouse leaves, it removes the class:

// Grab all player elements from the XML document
const allPlayers = document.querySelectorAll('player');

// Loop through each player to attach event listeners
allPlayers.forEach(player => {
  // Handle mouse hover
  player.addEventListener('mouseover', () => {
    const targetMenID = player.getAttribute('menID');
    // Find all players with the matching menID and add the highlight class
    document.querySelectorAll(`player[menID="${targetMenID}"]`).forEach(match => {
      match.classList.add('highlighted');
    });
  });

  // Handle mouse leave
  player.addEventListener('mouseout', () => {
    const targetMenID = player.getAttribute('menID');
    // Remove the highlight class from all matching players
    document.querySelectorAll(`player[menID="${targetMenID}"]`).forEach(match => {
      match.classList.remove('highlighted');
    });
  });
});

Step 3: Link CSS and JS to Your XML #

Make sure your XML document references both the CSS file and JavaScript file. Add these lines at the top of your XML (adjust file paths to match your project structure):

<?xml-stylesheet type="text/css" href="player-styles.css"?>
<script type="text/javascript" src="player-hover.js"/>

Quick Notes for XML Environments #

• If you're viewing the XML directly in a browser, most modern browsers support JavaScript in XML documents, but double-check for minor compatibility quirks.
• If your XML is embedded in an HTML page (via <iframe> or <object>), ensure the script runs in the context of the XML document, or adjust the JS to target the embedded content explicitly.

That's it! Now when you hover over any player with menID="m_John_Smith", all players with that same menID will show the hover state instantly.

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