javascript - jQuery mouseenter 未找到并将 addClass 应用于正确的数据属性 div

Question

我有一个像这样的 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>

当 primary-nav li a悬停时，jQuery 是用适当的 data-motion 滑动图像悬停的属性 #primary-nav li .

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");
    });

}

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

Answer 1

您可以使用 mouseover 和 mouseout 来实现此目的，因此您还需要从选择中删除 a 因为它没有data-rel 属性。

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

.is-open{
background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>