Javascript jQuery mousenter未找到并将addClass应用于正确的数据属性div

我有一个这样的HTML结构

<div class="outer-wrapper">
     <ul id="primary-nav">
           <li data-rel="mB">
                  <a href="#">
                       <h1 class="title">Title</h1>
                 </a>
             </li>
            <li data-rel="mE">
                   <a href="#">
                       <h1 class="title">Title</h1>
                   </a>
             </li>
             <li data-rel="yB">
                 <a href="#">
                    <h1 class="title">Title</h1>
                 </a>
            </li>
    </ul>
    <div id="feature-images">
          <div class="image-field">
               <ul>
                   <li data-motion="mB">
                        <div class="img" style="background-image:url('/images/full1.jpg')"></div>
                    </li>
                    <li data-motion="mE">
                        <div class="img" style="background-image:url('/images/full2.jpg')"></div>
                     </li>
                     <li data-motion="yB">
                          <div class="img" style="background-image:url('/images/full3.jpg')"></div>
                      </li>
                 </ul>
             </div>
      </div>
</div>

---

我的控制台没有错误或警告。我不确定我在这里做了什么。

您可以使用

mouseover

和

mouseout

进行类似操作，因此您还需要从选择中删除

a

，因为它没有

数据rel

属性

$（“#主导航li”）.mouseover（函数（）{
var$itemAtt=$（this.data（“rel”）；
$（“#功能图像.图像字段ul li[数据运动=”+$itemAtt+“]”]）.addClass（“打开”）；
}).mouseout（函数（）{
$（“#feature images.image字段ul li”）.removeClass（“打开”）；
});
。已打开{
背景颜色：蓝色；
}

















没问题抱歉，我在调试console.log时编辑了它。
function mpSlide() {

    $("#primary-nav li a").on("mouseenter", function () {
        var $itemAtt = $(this).data("rel");
        $("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
    }).on('mouseleave', function () {
        $("#feature-images .image-field ul li").removeClass("is-open");
    });

}