需实现悬停图片外其余图片降透明度，现有代码无效求帮助

Hey Alison, let's get that hover effect working for you! The issue you're running into might be a combination of DOM execution timing, selector scope, or CSS priority—let's break this down step by step.

First, let's fix the JavaScript #

Your current code logic is sound, but there are two common pitfalls that might be blocking it:

1. Your code runs before the DOM is fully loaded: If your script loads before the images are rendered, jQuery can't find the img elements to bind the hover event.
2. You're targeting all images on the page: This might affect unrelated images (like logos or icons) and could be less efficient if your page has lots of media.

Here's a revised version that addresses both issues. First, we'll target only the images in your completed works section (replace .completed-works-container with the actual parent container class/id from your site's DOM), and ensure the code runs after the DOM is ready:

jQuery(document).ready(function($) {
  // Target only images within your completed works section
  const $workImages = $('.completed-works-container img');

  $workImages.hover(
    function() {
      // Dim all images except the one being hovered
      $workImages.not(this).addClass('hovered');
      console.log("HOVERED");
    },
    function() {
      // Reset all images when hover ends
      $workImages.removeClass('hovered');
      console.log("NOT HOVERED");
    }
  );
});

Next, fix the CSS priority #

If the opacity change still isn't showing up, it's likely because your existing CSS has higher priority than the .hovered class. Let's make your selector more specific and add a smooth transition for better UX:

/* Use a more specific selector to override existing styles */
.completed-works-container img.hovered {
  opacity: 0.5;
  /* Optional: Add a smooth fade transition */
  transition: opacity 0.3s ease;
  /* The filter property is only needed for IE8 and below—feel free to remove it if you don't support old browsers */
  filter: alpha(opacity=50);
}

Bonus: Pure CSS alternative (no JavaScript needed!) #

If your completed works are structured with each image inside a parent container (like a .work-item card), you can achieve the same effect with pure CSS—this is often more performant:

/* When hovering over the entire works container, dim all images */
.completed-works-container:hover .work-item img {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

/* When hovering over a specific work item, keep its image fully opaque */
.completed-works-container .work-item:hover img {
  opacity: 1;
}

Note: This will dim all images when you hover anywhere in the container (not just over images). If you only want the effect when hovering directly over an image, stick with the JavaScript solution.

Quick troubleshooting tips #

• Right-click on one of your images and select "Inspect" to check if the .hovered class is being added/removed when you hover (look in the Elements tab).
• If the class is there but the opacity isn't changing, check the Computed tab to see what's overriding the opacity value.
• Make sure there's no other JavaScript on the page that's interfering with hover events (e.g., event stop propagation or class removal).

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