技术问题：jQuery mousenter事件无法为对应data属性的div添加addClass

Hey there! Let's work through why your mousenter event isn't targeting the right div in #feature-images when hovering over those #primary-nav list items. I'll break this down step by step based on the HTML structure you shared.

First, make sure your target elements are properly linked #

First off, I need to assume (since your HTML cut off) that the divs inside #feature-images have matching data-rel attributes to the <li>s—like this:

<div id="feature-images">
  <div class="image-field" data-rel="mB">...</div>
  <div class="image-field" data-rel="mE">...</div>
  <div class="image-field" data-rel="yB">...</div>
</div>

If that's not the case, adjust the selector to match how your target divs are identified (like a class that mirrors the data-rel value, e.g., class="image-field mB").

Working jQuery code to get this right #

Here's a complete snippet that should work, with explanations:

$(document).ready(function() {
  // Bind mousenter to each li in primary-nav
  $('#primary-nav li').on('mousenter', function() {
    // Grab the data-rel value from the hovered li
    var currentRel = $(this).data('rel');
    
    // First, remove the active class from all image-field divs (prevents multiple active items)
    $('#feature-images .image-field').removeClass('active');
    
    // Find the exact image-field div with matching data-rel and add your class
    $('#feature-images .image-field[data-rel="' + currentRel + '"]').addClass('active');
  });

  // Optional: Clear the class when mouse leaves the li
  $('#primary-nav li').on('mouseleave', function() {
    $('#feature-images .image-field').removeClass('active');
  });
});

Troubleshooting if it still isn't working #

If this doesn't do the trick, check these common issues:

• Is jQuery loaded correctly? Pop open your browser's console and type $—if it returns a function, you're good. If not, double-check your script tag for jQuery.
• Are your data-rel values an exact match? Capitalization matters! mB is not the same as mb, so make sure they're identical across the li and target div.
• Are elements added dynamically? If your <li>s or image divs are loaded via AJAX or after page load, direct event binding won't work. Use event delegation instead:

  $('#primary-nav').on('mousenter', 'li', function() {
    var currentRel = $(this).data('rel');
    $('#feature-images .image-field').removeClass('active');
    $('#feature-images .image-field[data-rel="' + currentRel + '"]').addClass('active');
  });
  

• Did you spell the class name right? Double-check that the class you're adding (like active) is spelled correctly everywhere.

That should get your hover functionality working as expected!

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