jQuery mousenter没有找到并将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的{​​{1}}属性滑动图片。

#primary-nav li

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;