如何基于当前悬停的元素隐藏和显示元素？

Question

我们需要能够基于当前悬停的元素隐藏和显示元素。我们在下面尝试了以下方法，但是它不会添加is-active类，也不会根据悬停的其他元素将其删除。

如何基于当前悬停的元素隐藏和显示元素？

目标（基于以下示例）：

1. 当您将鼠标悬停在some下的first上时，使用<div class="two" id="some-link">some link</div>类显示is-active
2. 当您将鼠标悬停在path下的first上时，<div class="two" id="some-link">some linke</div>应该不会显示（删除is-active类），而<div class="two" id="path-link">path link</div>应该显示（添加{{1 }}类）

当前问题：

1. is-active类在悬停元素更改时未删除

is-active

$(function() {
  $('li#two').hover( function() {
    var el_two = $(this);
    var el_id = el_two.attr('id');
    var el_link = el_two.attr('data-at');
    var el_sel = '#'+el_link+'.'+ el_id;
    var el_parent = el_two.parent().parent();
    el_parent.find('.is-active').removeClass('is-active');
    $(el_sel).addClass('is-active');
  });
});

.two {
  display: none;
}
.is-active {
  display: block;
}

Answer 1

首先，您的.find()使用了错误的选择器。您有find('is-active')这是一个元素名称选择器，您想要一个CSS类选择器，即.is-active。

el_parent.find('.is-active').removeClass('is-active');

请注意removeClass()，您不会使用css选择器，而只使用类名，因此为什么在该调用中不需要点号

现在，如果您还希望在将鼠标悬停在元素上时也删除该类，则需要为此添加一个事件侦听器，然后从那里调用removeClass。 .hover()使用第二个参数来设置此类事件侦听器回调。

$('li#two').hover(onHoverCallback,function(){
  //code for finding the right element
  $(el_sel).removeClass('is-active');
})

---

$(function() {
  $('li#two').hover( function() {
    var el_two = $(this);
    var el_id = el_two.attr('id');
    var el_link = el_two.attr('data-at');
    var el_sel = '#'+el_link+'.'+ el_id;
    var el_parent = el_two.parent().parent();
    el_parent.find('.is-active').removeClass('is-active');
    $(el_sel).addClass('is-active');
  },function(){
    var el_two = $(this);
    var el_id = el_two.attr('id');
    var el_link = el_two.attr('data-at');
    var el_sel = '#'+el_link+'.'+ el_id;
    $(el_sel).removeClass("is-active");
  });
});

.two {
  display: none;
}
.is-active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li id="one">
    <a href="#"> first</a>
    <div class="one">
      <ul>
        <li data-at="some-link" id="two">
          <a href="#"> some</a>
        </li>
        <li data-at="path-link" id="two">
          <a href="#"> path</a>
        </li> 
        <li data-at="another-one" id="two">
          <a href="#"> another one</a>
        </li> 
      </ul>
      <div class="dropdown">
        <div class="two" id="some-link">some link text</div>
        <div class="two" id="path-link">path link</div>
        <div class="two" id="another-one">another one</div>
      </div>
    </div>
  </li>
  <li id="one">
    <a href="#"> second</a>
    <div class="one">
      <ul>
        <li>
          <a href="#"> another some</a>
        </li>
        <li>
          <a href="#"> another path</a>
        </li>  
      </ul>
    </div>
  </li>
  <li id="one">
    <a href="#"> third</a>
    <div class="one">
      <ul>
        <li>
          <a href="#"> third some</a>
        </li>
        <li>
          <a href="#"> third path</a>
        </li>  
      </ul>
    </div>
  </li> 
</ul>